vue中的watch怎么用

2024-06-22 12:26:25 前端笔记 174

Vue.js 中使用 watch

在 Vue.js 中，watch 选项允许开发者监听特定数据的变化。一旦数据发生变化，watch 就会触发一个回调函数，该函数可以执行更新视图或执行其他操作等任务。

使用语法

watch: {
  // 要监听的数据属性
  propertyName: {
    // 回调函数
    handler(newValue, oldValue) {
      // 在数据发生更改时运行的代码
    },

    // 可选：配置项
    immediate: true | false, // 立即执行回调
    deep: true | false // 深度监听对象或数组
  }
}

使用示例

export default {
  data() {
    return {
      count: 0
    }
  },

  watch: {
    // 监听 count 属性
    count: {
      handler(newValue, oldValue) {
        console.log(`count 发生变化：${oldValue} -&gt; ${newValue}`)
      },

      // 立即执行回调
      immediate: true
    }
  }
}

在这个示例中，count 属性被监听。当 count 发生变化时，handler 函数会被调用，它会记录 count 值的变化。由于 immediate 设置为 true，回调函数会在组件首次渲染时立即执行。

配置选项

watch 选项提供了几个配置选项，用于自定义其行为：

immediate: 指定是否在组件初始化时立即执行回调函数。

deep: 指定是否递归监听对象或数组的更改。如果设置为 true，则数组或对象中的嵌套属性的变化也会触发回调函数。

注意：

避免在 watch 回调函数中重新设置同一数据属性，这会导致陷入无限循环。
如果监听的对象或数组较大，请考虑使用 deep 选项，以避免性能问题。
如果您只关心初始值，可以使用 created 钩子函数。