Vue 侦听器（watchers）

在Vue中，侦听器（watchers）是一个非常重要的特性，它允许我们观察和响应Vue实例上数据属性的变化。当数据属性发生变化时，我们可以执行一些特定的操作，比如更新DOM、发起网络请求或者执行其他业务逻辑。

侦听器的定义与使用

在Vue组件中，我们可以通过watch选项来定义侦听器。watch是一个对象，它的键是要侦听的数据属性名，值是一个回调函数。当侦听的数据属性发生变化时，这个回调函数就会被调用。

回调函数参数

回调函数接收两个参数：新值和旧值。这两个参数分别表示数据属性变化后的新值和变化前的旧值。这使得我们可以在回调函数中根据新值和旧值来执行相应的操作。

深度侦听

当需要侦听的对象是嵌套的对象或数组时，我们可能希望侦听其内部属性的变化。这时，可以使用deep选项来开启深度侦听。但是，需要注意的是，深度侦听会增加一定的性能开销，因此应谨慎使用。

立即执行

默认情况下，侦听器在数据属性首次变化时不会执行。如果需要侦听器在组件创建时立即执行，可以使用immediate选项。这样，当组件创建时，即使数据属性尚未发生变化，侦听器的回调函数也会被执行一次。

示例

下面是一个简单的示例，演示了如何在Vue中使用侦听器来观察和响应数据属性的变化：

new Vue({
  el: '#app',
  data: {
    name: '',
    greeting: 'Hello!'
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        // 当name发生变化时，这个函数会被调用
        this.greeting = 'Hello, ' + newVal + '!';
      },
      immediate: true // 在创建时立即执行一次
    }
  }
});

在上面的示例中，我们定义了一个名为name的数据属性，并在watch选项中定义了一个侦听器来观察它的变化。当name的值发生变化时，侦听器的回调函数会被调用，并且我们将greeting的值更新为包含新name值的问候语。由于我们设置了immediate: true，所以当组件创建时，即使name的值还没有变化，回调函数也会立即执行一次。

深度监听（deep watch）

深度监听允许我们监听对象内部所有属性的变化，而不仅仅是对象本身的变化。当对象内部的任何属性发生变化时，Vue 都会触发侦听器的回调函数。

下面是一个使用深度监听的 Vue 示例：

new Vue({
  el: '#app',
  data: {
    userInfo: {
      name: '张三',
      age: 25,
      address: {
        city: '北京',
        street: '朝阳路'
      }
    }
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        // 当userInfo对象或其内部属性发生变化时，这个函数会被调用
        console.log('userInfo changed:', newVal);
      },
      deep: true // 开启深度监听
    }
  }
});

在上面的示例中，我们创建了一个包含 userInfo 对象的 Vue 实例。userInfo 对象有一个嵌套的 address 对象。通过在 watch 中为 userInfo 设置 deep: true，我们告诉 Vue 监听 userInfo 对象及其所有嵌套属性的变化。

现在，无论 name、age、city 还是 street 中的任何一个属性发生变化，userInfo 的侦听器都会被触发，并且新的 userInfo 对象会作为参数传递给 handler 函数。

需要注意的是，深度监听会增加一定的性能开销，因为 Vue 需要递归地遍历对象的所有属性来检查变化。因此，在不需要深度监听的情况下，最好避免使用它，或者尝试优化你的数据结构，以减少需要监听的属性数量。

如果你只对对象的某个特定嵌套属性感兴趣，而不是整个对象，你也可以直接监听那个嵌套属性，而不需要对整个对象进行深度监听。例如，如果你只想监听 userInfo.address.city 的变化，你可以这样写：

watch: {
  'userInfo.address.city': function(newVal, oldVal) {
    // 当userInfo.address.city发生变化时，这个函数会被调用
    console.log('City changed:', newVal);
  }
}

这样，只有当 userInfo.address.city 属性发生变化时，侦听器才会被触发，从而避免了不必要的性能开销。