watch :侦听器,当需要在数据变化时执行异步或开销较大的时触发。watch一般有三种用法:
1.阉割版(简写)
语法:
watch: {
侦听数据: function ( 新数据, 旧数据 ) {
----- 可以在此处进行操作 ------
}
}
代码实例:
<body>
<div id="root">
<h2>{{num}}</h2>
<button @click='fn'>num++</button>
</div>
<script>
Vue.config.productionTip = false//组织vue在启动是生成生产提示
new Vue({
el: '#root',
data: {
num:1
},
methods: {
fn(){
this.num++
}
},
watch:{ // 侦听器
// 这里就是监听num的变化
num: function( newNum, oldNum ) { // 要监听的数据
console.log(newNum); // 变化之前的数据
console.log(oldNum); // 变化之后的数据
}
}
})
</script>
</body>
2.完整写法 handler的deep和immediate
- deep: watch 本身是无法深度侦听的,当配置了 deep:true 就可以进行深度侦听。
- data:{ list:{ num:1 } } ; 这种情况就需要深度监听才能监听到num的变化
- immediate: watch 有一个特点在第一次绑定时是不会触发侦听器的,设置 immediate:true 时就可以一绑定就触发侦听器
语法:
watch: {
侦听数据 : {
handler: function( 旧数据, 新数据 ){
----- 可以在此处进行操作 ------
},
deep: true, // 深度侦听
immediate: true // 执行触发一次
}
}
<body>
<div id="root">
<h2>{{list.num}}</h2>
<button @click='fn'>num++</button>
</div>
<script>
Vue.config.productionTip = false//组织vue在启动是生成生产提示
new Vue({
el: '#root',
data: {
list:{
num:0
}
},
methods: {
fn(){
this.list.num++
}
},
watch:{ // 侦听器
// 注意:这里整听 "list.num" 需要打引号
"list.num":{ // 要监听的数据
// handler:侦听器的完整写法
handler:function(newNum,oldNum){
console.log(newNum); // 新数据
console.log(oldNum); // 旧数据
}
}
}
})
</script>
</body>