Vue.js 中 watch 命令的作用

在 Vue.js 中， 命令用于监听数据变化，并根据变化执行特定的处理函数。它的主要作用是，在数据发生特定改变时，触发相应的函数以更新视图或执行其他操作。

作用机制

使用场景

命令通常用于以下场景：

当数据变化时动态更新视图
响应表单输入或其他用户交互
监控状态变化并触发相应的操作
跟踪组件状态的改变，例如页面滚动或鼠标位置

示例

以下示例展示了如何使用 命令：

<code class="javascript">import Vue from "<a style="color:#f60; text-decoration:underline;" href="/zt/15721.html" target="_blank">vue</a>";

export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count: {
      // 在 count 数据发生改变时触发此函数
      handler(newValue, oldValue) {
        console.log(`count changed from ${oldValue} to ${newValue}`);
      },
      // 仅在 count 数据为偶数时触发此函数
      immediate: true,
    },
  },
};</code>

深度监听

Vue.js 允许使用嵌套对象或数组作为监听数据。若要对嵌套数据进行深度监听，可以使用 选项：

<code class="javascript">watch: {
  obj: {
    handler() {
      // obj 中的任何数据改变都会触发此函数
    },
    deep: true,
  },
};</code>