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自学视频的主要内容,如果未能解决你的问题,请参考以下文章
Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre)(代码片段