vue3 的 jsx 循环?

Question

当我向数组中添加新的项后会重新渲染整个内容, 想要的效果是v-for的那种只渲染变动的部分

import { NForm, NGrid, NFormItemGi } from 'naive-ui'
import { ref, onMounted, toRefs } from 'vue'
import initSortable from '@/composables/initSortable'
import JsonToComponent from './JsonToComponent'

export default {
    name: 'xxx',
    props: {
        overview: {
            type: Object,
            require: true
        }
    },
    emits: ['sort', 'pull', 'put'],
    setup(props, {emit}) {
        const grid = ref(null)

        const { overview } = toRefs(props)
        const { draggable, elements, name } = overview.value

        const renderFormItem = el => {
            const { span, label, id, ...another } = el
            const Child = JsonToComponent({ ...another })
            return (
                <NFormItemGi class="form-grid-item" key={id} span={span} label={label}>
                    <Child />
                </NFormItemGi>
            )
        }

        onMounted(() => {
            if (draggable) {
                initSortable({
                    el: grid.value.$el,
                    config: draggable,
                    emits: emit,
                    name
                })
            }
        })

        return () => (
            <NForm>
                <NGrid class={name === 'WorkSpace' ? 'form-grid' : ''} ref={grid}>
                    {elements.map(renderFormItem)}
                </NGrid>
            </NForm>
        )
    }
}

Answer 1

已解决,是我没有设置表单数据导致的

Answer 2

JSX就是有这个问题，因为是写JS动态语法，没法做到像模板语法一样静态分析，也就很难享受到模板语法带来的性能优化了。如果需要极致性能，Vue官方就建议使用模板语法。