vue组件间传值.sync不生效

Question

// 属性绑定
<c-drop :isOpen.sync="row.isFold">
//  写法一
initData(data) {
            this.dataList = cloneDeep(data);
            this.dataList = this.dataList.map((e, i) => {
                e['isFold'] = true;
                if(i === 0) {
                    e['isFold'] = false;
                }
                return e;
            })
        },
// 写法二
initData(data) {
           let arr = cloneDeep(data);
            this.dataList = arr.map((e, i) => {
                e['isFold'] = true;
                if(i === 0) {
                    e['isFold'] = false;
                }
                return e;
            })
        },

不知道为啥，第一种写法.sync不生效，第二种写法却可以动态绑定

Answer 1

Vue 的更新机制导致对数组直接进行修改的时候不一定能触发响应式更新
你第二种是用了个新的数组操作再赋值的，这样写VUE能响应式更新