Vue.js 中的 watch 可用于监听数据属性的变化并执行操作。语法为：watch(expression, callback, options)。它支持使用字符串或函数监听数据属性，并在变化时调用回调函数，并可通过 options 配置是否立即调用、是否深层监听和是否同步更新。
Vue.js 中 watch 的用法
Vue.js 中的 watch 是一个响应式 API，可让你监听数据属性的变化并根据这些变化执行操作。
语法
watch(expression, callback, options)
参数
立即学习“前端免费学习笔记（深入）”；
- expression：要监听的数据属性。可以是字符串（属性名）或函数（返回需要监听的值）。
- callback：当数据属性发生变化时调用的函数。它接收两个参数：新值和旧值。
- options（可选）：用于配置 watch 的可选对象。
示例
// 使用字符串
watch('message', function (newValue, oldValue) {
console.log(`Message changed from "${oldValue}" to "${newValue}".`);
});
// 使用函数
watch(function () {
return this.count;
}, function (newValue, oldValue) {
console.log(`Count incremented from ${oldValue} to ${newValue}.`);
});选项
- immediate：控制 watch 是否在组件初始化时立即调用回调函数，默认值为 false。
- deep：控制 watch 是否深层监听对象和数组的变化，默认值为 false。
- sync：控制 watch 是否在数据属性发生变化后立即调用回调函数，默认值为 false。
使用场景
使用 watch 的常见场景包括：
- 在数据属性发生变化时更新 DOM
- 在数据属性发生变化时触发外部动作（例如，发出请求）
- 响应其他组件的事件
