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

Posted IT入门

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-10 数据监测watch自学视频相关的知识,希望对你有一定的参考价值。



 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 的方式就会很有帮助。


以上是关于vue-10 数据监测watch自学视频的主要内容,如果未能解决你的问题,请参考以下文章

angularJS 里的$watch的用法

linux命令大全之watch命令详解(监测命令运行结果)

Hadoop自学笔记常见Hadoop相关项目一览

CentOS 性能监测命令

vuejs经验交流之-watch 深度监测

Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre)(代码片段