Vue进行深度侦听时,如何解决新旧值一样的问题?

72 篇文章 11 订阅

Vue在进行数值/对象等复杂数据类型的深度侦听时,如果不稍加处理,深度侦听的新旧值会一模一样,影响有些业务的处理。
在上一篇博客中我已经把场景阐述清楚了,这期就只写处理办法,沿用上期代码。
只需要添加一个计算属性即可。

<div id="app">
    <h3>{{computedObj}}</h3>
    <button @click='obj[0].name = "CreatorRay" '>改变</button>
</div>
  <script>
        var app = new Vue({
            el:'#app',
            data:{
                obj:[{name:'Ray'}]
            },
            computed: {
                computedObj:function(){
                    return this.obj[0].name;
                }
            },
            watch:{
                'computedObj':{
                    deep:true,
                    handler(newV,oldV){
                        console.log('newV',newV);
                        console.log('oldV',oldV);
                        
                    },

                }
            }
        });
    </script>

在这里插入图片描述
只是给大家提供一个解决的办法,确实在有些场景下必须用到旧值进行一些处理。
如果不是一定要用的旧值,不要随便这样处理,这样会强行破坏原型链,而且多添加一步计算属性也会影响性能。

没看懂干嘛的可以看一下上期的博客,上期留了一个小问题,因为篇幅较长了,就单独发了一期解决办法。

有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CreatorRay

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值