const arr = [ {},{},{},{}]
vue watch() 可以监听到变化
问题: 我只想取到发生变化的对象, 而非整个arr
当然我可以先copy一下,再遍历对比,拿到 发生改变的对象
或者也可以, 记录每个操作
但感觉有点....
要怎么样才可以更简单,更好看地 完成这任务
这是我现在的写法
watch(() => groupStore.value.member_list, (newValue) => {
memberChange.add = []
memberChange.del = []
memberChange.change = []
allowReset.value = !_.isEqual(copyMemberList, groupStore.value.member_list)
for (let i of copyMemberList) {
const del = newValue.every(item => item.username !== i.username)
if (del) { memberChange.del.push(i); continue }
const change = newValue.find(item => item.username == i.username && !_.isEqual(item, i))
if (change) { memberChange.change.push(i) }
}
for (let i of groupStore.value.member_list) {
const add = copyMemberList.every(item => item.username !== i.username)
if (add) { memberChange.add.push(i);console.log('add=====================',add); continue }
}
console.log('copyMemberList=====================', copyMemberList)
console.log('memberChange=======================', memberChange)
}, { deep: true })
不监听整个数组，for遍历生成数组项监听Proxy，然后将新Proxy实例压入数组项中，通过数组项变量来更新内容，也会同时更新arr中的值并触发set操作，但是push或者splice删除项需要同时操proxy代理数组变量
<script src="https://unpkg.com/vue@next" data-ver="3"></script>
<div id="app">
<div v-for="item in arr">{{item}}</div>
</div>
<script>
var config = {
data() {
return { arr: [{}, {}, {}, {}], arrproxy: [] };
},
mounted() {
for (let item of this.arr) {
this.arrproxy.push(this.createItemProxy(item))
}
this.arrproxy[0].x = 11;
this.arr.splice(1, 1)
this.arrproxy.splice(1, 1);//要同时删除
this.arrproxy[1].b = 11;
},
methods: {
createItemProxy(item) {
return new Proxy(item, {
set: (target, prop, value) => {
console.log(prop, value)
target[prop] = value;
}
});
}
}
};
Vue.createApp(config).mount('#app')
</script>