watch是一个监听器,当数据发生变化时通过watch监听数据变化并做一些操作。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
例子:
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
console.log(newQuestion, oldQuestion)//watch里的函数有两个参数,数据变化后的值和变化前的值
}
},
- 当watch监听对象或数组时可以加一个深度监听的属性deep:
watch: {
obj:{
handler(new_value,old_value){
console.log(new_value,old_value)
}
},
deep: true
}
注意:如果直接改变一个值是无法触发watch的,比如:
obj['a']=2
此时需要加个Vue.$set:
this.$set(tobj,'a',2)
- watch还有一个特点,在数据第一次绑定的时候不会监听改数据,只有发生改变是才会执行watch里对应的函数,那这时我们需要最初绑定时有执行该函数就需要使用immediate属性了。详细见这里。
data(){
return{
demo:""
}
}
watch: {
demo(val) {
handler(newName, oldName) {
console.log(newName)
console.log(oldName)
},<details>
immediate: true
}
}