vue watch() 数组中的对象,获取变化的对象,请教

Question

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 })

Answer 1

不监听整个数组，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>