在 Vue.js 中，watch 是一个对象，用于观察和响应 Vue 实例上的数据变化。当被监视的属性发生变化时，watch 里的回调函数将被调用。
（vue2）官方文档：计算属性和侦听器 — Vue.js (vuejs.org)
下面是一个简单的 watch 示例：
<template>
<div>
<input v-model="message" placeholder="输入一些文字...">
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
watch: {
// 监听 message 属性的变化
message(newVal, oldVal) {
console.log(`新的 message 值是: ${newVal}`);
console.log(`旧的 message 值是: ${oldVal}`);
}
}
};
</script>在这个例子中，当 message 的值发生变化时，watch 里的回调函数将被调用，并打印出新旧的值。
你还可以使用深度监听对象或数组的变化，只需在 watch 选项中将属性设置为一个对象，并设置 deep 属性为 true：
<template>
<div>
<input v-model="userInfo.name" placeholder="输入名字...">
<p>{
{ userInfo.name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: ''
}
};
},
watch: {
userInfo: {
handler(newVal, oldVal) {
console.log(`新的 userInfo 值是:`, newVal);
console.log(`旧的 userInfo 值是:`, oldVal);
},
deep: true // 深度监听
}
}
};
</script>在这个例子中，当 userInfo 对象的 name 属性发生变化时，watch 里的回调函数将被调用，并打印出新旧的值。
此外，还可以使用 immediate 属性，使得 watch 在初始化时立即执行一次回调函数：
watch: {
message: {
handler(newVal, oldVal) {
console.log(`新的 message 值是: ${newVal}`);
console.log(`旧的 message 值是: ${oldVal}`);
},
immediate: true // 初始化时立即执行
}
}在这个例子中，watch 在初始化时将立即执行一次回调函数，打印出 message 的初始值。
更多请看其他大佬文章：
Vue.js 监听属性 | 菜鸟教程 (runoob.com)
Vue进阶（三十五）：watch 监听函数详解 - 掘金 (juejin.cn)
Vue之watch监听的原理_vue watch原理-CSDN博客
