满口金牙 2022-12-16 18:13 采纳率: 92.3%
浏览 30
已结题

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

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

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-12-16 21:45
    关注

    不监听整个数组,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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
  • CSDN-Ada助手 CSDN-AI 官方账号 2022-12-16 20:28
    关注
    评论
  • 有问必答小助手 2022-12-17 01:36
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月25日
  • 已采纳回答 12月17日
  • 修改了问题 12月16日
  • 修改了问题 12月16日
  • 展开全部

悬赏问题

  • ¥15 Qt 不小心删除了自带的类,该怎么办
  • ¥15 我需要在PC端 开两个抖店工作台客户端.(语言-java)
  • ¥15 有没有哪位厉害的人可以用C#可视化呀
  • ¥15 可以帮我看看代码哪里错了吗
  • ¥15 设计一个成绩管理系统
  • ¥15 PCL注册的选点等函数如何取消注册
  • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
  • ¥15 Python爬虫程序
  • ¥15 crypto 这种的应该怎么找flag?
  • ¥15 代码已写好,求帮我指出错误,有偿!