vue3怎么用watch

vue 3 中使用 watch api 监听数据变化，有两种方法：watch 选项或 watch 方法。回调函数接收 newval（最新值）和 oldval（旧值，仅限 watch 选项）。回调函数可返回 void、对象（包含更新数据）或 promise。注意，watch 在下次组件更新时才触发回调函数，深度监听数据变化，并推荐使用 lazy 选项延迟触发。

Vue 3 中使用 watch

在 Vue 3 中，watch API 允许开发者监听数据变化并相应地更新 UI。

如何使用 watch

在 Vue 3 中使用 watch 有两种方法：

立即学习“前端免费学习笔记（深入）”；

1. watch 选项

export default {
  watch: {
    // 监听数据变化并执行回调函数
    myData(newVal, oldVal) { /* ... */ }
  }
}

2. watch 方法

export default {
  watch() {
    return {
      myData: (newVal, oldVal) => { /* ... */ }
    }
  }
}

回调函数参数

回调函数接收两个参数：

• newVal：数据的最新值
• oldVal：数据的旧值（可选，仅在使用 watch 选项时提供）

回调函数返回值

回调函数可以返回以下值：

• void： 不执行任何操作
• 一个对象： 包含需要更新的数据属性和值的键值对
• 一个 Promise： 等待 Promise 解决后再更新数据

例如

export default {
  watch: {
    myData(newVal) {
      // 如果 myData 超过 100，更新另一个数据属性
      if (newVal > 100) {
        this.anotherData = '超过 100'
      }
    }
  }
}

注意：

• watch 不会立即触发回调函数。它会在下次 Vue 组件更新时触发。
• watch 监听数据属性的深度变化。这意味着它也会触发子属性的变化。
• 如果不需要监听数据变化，可以使用 lazy 选项延迟触发回调函数。
• 避免在 watch 回调函数中修改原始数据。相反，返回一个对象来更新数据。