watch中文翻译过来就是 观察 的意思,所以vue中的watch就像一个观察者一样,观察状态的变化,变化就会触发回调函数。
页面:
<div>
<h1>{{ state }} <button @click="add">+1</button></h1>
</div>
js:
export default {
data() {
return {
state: 1,
}
},
methods: {
add() {
this.state++;
}
},
watch: {
// value: 改变后的值, oldValue: 改变前的值
state(value, oldValue) {
// 需要做的事
console.log('state改变了!,新值:' + value + ', 旧值:' + oldValue);
}
}
}
当点击按钮state增加就会进入watch。
watch也能监听computed里的数据。