利用vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序完美解决watch多级耦合监听与mounted再次赋值的逻辑执行


 

将这个demo页面植入你项目中某个界面去运行感受一下,输出结果如下:

页面显示值:2 200  200

控制台输出结果:

综上所述,他们彼此间的生命周期先后顺序是这样的:

computed -> created -> mounted 

而 watch 与 computed 的区别,最关键的是watch需要监听值的变化而改变,但是computed从一开始就可以达到和某个值关联起来。
如果在watch中有多级耦合联动,但是在mounted中我们要进行缓存赋值,我们要怎么做,这里就需要利用到事件的异步处理,了解js的执行顺序

利用vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序完美解决watch多级耦合监听与mounted再次赋值的逻辑执行_第1张图片

利用vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序完美解决watch多级耦合监听与mounted再次赋值的逻辑执行_第2张图片

setData存放的是所有缓存this.$data

这里主要用到的是解决mounted加载,缓存赋值,然后进行watch监听触发逻辑,最后异步对特定值进行再次赋值

完美解决多级耦合,再次赋值的时候一定要进行的是深拷贝才行,这里很关键

你可能感兴趣的:(vue)