在 Vue.js 中，watch 是一个对象，你可以使用它来观察和响应 Vue 实例上的数据变化。当被观察的数据发生变化时，对应的回调函数将会被执行。
以下是如何使用 watch 的基本示例：
javascript
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
watch: {
message: function(newVal, oldVal) {
console.log('Message changed from ' + oldVal + ' to ' + newVal);
}
}
});
在这个例子中，我们正在观察 message 数据属性的变化。当 message 发生变化时，watch 对象的 message 属性对应的函数将被调用，打印出旧值和新值。
此外，你可以使用深度观察 (deep) 来观察嵌套对象的变化：
javascript
new Vue({
el: '#app',
data: {
user: {
name: 'John',
age: 30
}
},
watch: {
user: {
handler: function(newVal, oldVal) {
console.log('User changed');
},
deep: true // 深度观察 user 对象
}
}
});
在这个例子中，无论 user 对象的属性如何变化，都会触发 handler 函数。如果你不设置 deep，那么只有 user 对象引用改变时才会触发。
除了 handler，你还可以使用 immediate 选项来立即执行观察器：
javascript
new Vue({
el: '#app',
data: {
count: 0
},
watch: {
count: {
immediate: true, // 立即执行观察器
handler: function(newVal, oldVal) {
console.log('Count is now ' + newVal);
}
}
}
});
在这个例子中，handler 函数将在初始化时立即执行，打印出 "Count is now 0"。
标签：vue,newVal,handler,watch,如何,Vue,user,message From： https://blog.51cto.com/u_16273048/9135401