vue.js组件设计,导致死循环

现在有一个复杂的页面,结构大概如下:

data() {
    return {
        prop1: '',
        prop2: '',
        prop3: '',
        propTab: []
    }
},

现在 propTab 属性对应的ui逻辑比较固定,重复度高,所以提取为一个单独的组件,组件代码如下:

props: {
    list: {
        type: Array,
        default: function() {
            return []
        }
    }
},
watch: {
    tabList: {
        handler (val) {
            this.$emit('changed', val)
        },
        deep: true
    },
},
mounted() {
    this.tabList = JSON.parse(JSON.stringify(this.list))
},
data() {
    return {
        tabList: []
    }
},

但是现在有如下问题:

1、组件中需要监听 list 的改变,外部需要等到组件内部对象list的最新值;
2、当外部属性(propTab)改变时,组件需要更新(如:详细页通过ajax获取到详细内容时);

这样就导致死循环了,外部list改变,组件内部需要更新tabList,内部tabList更新了,需要emit通知外部,感觉是对组件的使用(组件的工作模式)有问题,这种组件该怎么设计呢?

回答:

如果你是ui组件 那么只接受数据渲染 内部不应该有异步数据
如果能是业务组件那么就自给自足

上面你的组件props拿了一个list 直接使用就可以 不需要拷贝一份 当list更新组件自然会更新

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注