Vue.js 中 watch 的用法

Vue.js 中的 watch 是一个响应式 API，可让你监听数据属性的变化并根据这些变化执行操作。

语法

<code class="js">watch(expression, callback, options)</code>

参数

expression：要监听的数据属性。可以是字符串（属性名）或函数（返回需要监听的值）。

callback：当数据属性发生变化时调用的函数。它接收两个参数：新值和旧值。

options（可选）：用于配置 watch 的可选对象。

示例

<code class="js">// 使用字符串
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}.`);
});</code>

选项

immediate：控制 watch 是否在组件初始化时立即调用回调函数，默认值为 false。

deep：控制 watch 是否深层监听对象和数组的变化，默认值为 false。

sync：控制 watch 是否在数据属性发生变化后立即调用回调函数，默认值为 false。

使用场景

使用 watch 的常见场景包括：

在数据属性发生变化时更新 DOM
在数据属性发生变化时触发外部动作（例如，发出请求）
响应其他组件的事件