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

Question

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

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通知外部，感觉是对组件的使用（组件的工作模式）有问题，这种组件该怎么设计呢？

Answer 1

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

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