vue中的watch怎么用-Vue.js-PHP中文网

vue中的watch怎么用

下次还敢

发布： 2024-06-12 19:36:21

原创

1260人浏览过

Vue.js 中的 watch 选项允许开发者监听特定数据的变化。当数据发生变化时，watch 会触发一个回调函数，用于执行更新视图或其他任务。其配置选项包括 immediate，用于指定是否立即执行回调，以及 deep，用于指定是否递归监听对象或数组的更改。

vue中的watch怎么用

Vue.js 中使用 watch

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

使用语法

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

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

登录后复制

使用示例

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

<code class="javascript">export default {
  data() {
    return {
      count: 0
    }
  },

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

      // 立即执行回调
      immediate: true
    }
  }
}</code>

登录后复制

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