{{computedObj}}

">
当前位置:   article > 正文

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

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

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

<div id="app">
    <h3>{{computedObj}}</h3>
    <button @click='obj[0].name = "CreatorRay" '>改变</button>
</div>
  • 1
  • 2
  • 3
  • 4
  <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

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

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

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

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

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/113229
推荐阅读