vue中的watch的用法

vue.js 中的 watch 可用于监听数据属性的变化并执行操作。语法为：watch(expression, callback, options)。它支持使用字符串或函数监听数据属性，并在变化时调用回调函数，并可通过 options 配置是否立即调用、是否深层监听和是否同步更新。

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
• 在数据属性发生变化时触发外部动作（例如，发出请求）
• 响应其他组件的事件

以上就是vue中的watch的用法的详细内容，更多请关注叮当号网其它相关文章！