前言
上节,我们学习了
- Vue指令之
v-model
双向数据绑定 点击进入上一节
本节内容
- 侦听器场景:异步操作(开销较大)
1、侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
- 基本的数据类型:使用watch直接监听
- 复杂数据类型 Object Array: 要深度监视
1.1、【监听】基本的数据类型
示例
<body>
<div id='app'>
<input type="text" v-model='msg'>
<h3>{{msg}}</h3>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'',
stus:[{name:'jack'}]
},
watch: {
// key是属于data对象的属性名 value:监视后的行为 newV :新值 oldV:旧值
'msg':function(newV,oldV){
console.log(newV,oldV);
if(newV === '100'){
console.log('hello');
}
}
},
})
</script>
</body>
效果
![](https://i-blog.csdnimg.cn/blog_migrate/b80214499ad8ec52519c903ace817a39.gif)
1.2、【监听】复杂数据类型
示例
<body>
<div id='app'>
<h3>{{stus[0].name}}</h3>
<button @click='stus[0].name = "Tom"'>改变</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'',
stus:[{name:'jack'}]
},
watch: {
// 深度监视: Object |Array
"stus":{
deep:'true',
handler:function(newV,oldV){
console.log(newV[0].name);
}
}
},
})
</script>
</body>
效果
![](https://i-blog.csdnimg.cn/blog_migrate/db59f718ff88c74d54d8dd7e825dc3aa.gif)