Vue 中 Watch 用法详解

在 Vue 开发中，Watch（监听器）是一个非常实用的特性，它能帮助我们监听数据的变化，并在数据发生改变时执行相应的操作。

Watch 的基本语法相对简单。在 Vue 实例中定义 watch 选项，它是一个对象，对象的每个属性都是一个监听器。例如，有一个数据属性 message，想要监听它的变化：

new Vue({
  data: {
    message: ''
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message 发生了变化，新值为：', newValue);
      console.log('旧值为：', oldValue);
    }
  }
});

这里，message 是要监听的数据属性名，而对应的函数接收两个参数：newValue 和 oldValue，分别代表数据变化后的新值和旧值。

Watch 不仅能监听简单的数据属性，还能监听复杂的对象和数组。不过在监听对象或数组时，需要注意一些细节。如果是监听对象的某个属性变化，直接写属性名可能无法生效，这时候需要使用深度监听。例如：

new Vue({
  data: {
    user: {
      name: '张三',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('user 对象发生了变化');
      },
      deep: true
    }
  }
});

通过设置 deep: true，Vue 会递归地监听对象的所有属性变化。

对于数组，Vue 对其部分方法进行了包裹，使得这些方法调用时能够触发响应式更新，从而被 Watch 监听到。例如 push、pop、shift 等方法。

另外，Watch 还有一个 immediate 选项。当设置 immediate: true 时，监听器会在初始化时立即执行一次回调函数，而不需要等到数据发生变化。比如：

watch: {
  message: {
    handler(newValue, oldValue) {
      console.log('message 发生了变化或初次加载');
    },
    immediate: true
  }
}

掌握 Vue 中 Watch 的用法，能够让我们在处理数据变化时更加灵活和高效，提升应用开发的质量和用户体验。无论是简单的数据监控还是复杂的业务逻辑处理，Watch 都能发挥重要作用，是 Vue 开发者必须熟练掌握的技能之一。