vue3 的 jsx 循环?

一堆菠萝
  • 1
浙江新手上路,请多包涵

当我向数组中添加新的项后会重新渲染整个内容, 想要的效果是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>
        )
    }
}
回复
阅读 698
2 个回答
一堆菠萝
  • 1
浙江新手上路,请多包涵
✓ 已被采纳

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏