Vue 中 watch 的用法

什么是 watch

watch 是 Vue 中一个响应式函数，它允许您监听数据属性值的变化并执行回调函数。当被监视的属性发生改变时，回调函数会被调用，您可以在其中执行任何必要的更新或操作。

语法

<code class="js">watch(property, handler)</code>

property: 要监视的属性或属性数组。

handler: 当属性值改变时被调用的回调函数。它接收新值和旧值作为参数。

基本用法

要监视某个属性，只需传入属性名称和一个回调函数：

<code class="js">watch('count', (newValue, oldValue) =&gt; {
  // count 的新值是 newValue，旧值是 oldValue
})</code>

监视多个属性

要一次监视多个属性，可以传递一个属性数组：

<code class="js">watch(['count', 'name'], (newValue, oldValue) =&gt; {
  // 监视的值在 newValue 中作为对象提供，键为属性名
})</code>

选项对象

您可以使用选项对象来配置 watch 行为：

<code class="js">watch({
  count: {
    handler(newValue, oldValue) {
      // ...
    },
    immediate: true,
    deep: true
  }
})</code>

immediate: 如果为 true，回调函数在被监视的属性初始化时立即调用。

deep: 如果为 true，watch 将监视对象和数组的深度更改，而不是仅监视引用更改。

高级用法

监听特定属性路径

使用点表示法可以监听对象属性路径的变化：

<code class="js">watch('user.name', (newValue, oldValue) =&gt; {
  // ...
})</code>

使用 return 值

watch 回调函数可以返回一个函数或一个包含 unwatch 函数的 Promise：

函数: 当组件被销毁时，该函数会被调用，您可以使用它来清除任何资源或取消订阅事件。

Promise: 当 Promise 被解析时，watch 将被解除。

何时使用 watch

watch 适用于需要对数据属性值的变化做出反应的情况，例如：

更新 UI
触发其他计算属性或方法

异步加载数据
表单验证

替代方案

在某些情况下，computed properties 可能是 watch 的替代方案。但是，computed properties 是派生的，这意味着它们的值是由其他响应式属性计算出来的。