vue-10 数据监测watch自学视频

Posted 2021-04-16 IT入门

 01 

watch

Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id = "app"><p>计数器: {{ num }}</p><button @click="num++" >点我</button></div><script>var vm = new Vue({el: '#app',data: {num: 1 },watch:{'num': function(nval, oval) {console.log('num变化 :' + oval + ' 变为 ' + nval + '!'); },  }});</script>

每次点击按钮都会输出：

num变化 :1变为2!

num变化 :2变为3!

...

 02 

对象变化监听

我们需要监听对象的属性值是否发生改变用，我们采用deep方式来监听

<div id = "app"><p>计数器: {{ num }}</p><button @click="num.age++" >点我</button></div><script>var vm = new Vue({el: '#app',data: {num: {age:1} },watch:{'num':{handler:function(nval, oval) {console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!') },deep:true } }});</script>

 03 

methods,watch,computed的区别

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

methods 方法表示一个具体的操作，主要书写业务逻辑；

watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，自定义 watcher 的方式就会很有帮助。