Vue 中侦听器的用法是什么？

推荐答案

在 Vue 中，侦听器（Watcher）用于监听 Vue 实例中数据的变化，并在数据变化时执行相应的回调函数。侦听器可以通过 watch 选项或 $watch 方法来定义。

使用 watch 选项

// www.javascriptcn.com code example
new Vue({
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
});

使用 $watch 方法

// www.javascriptcn.com code example
const vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
});

vm.$watch('message', function(newVal, oldVal) {
  console.log('message changed from', oldVal, 'to', newVal);
});

本题详细解读

1. watch 选项

watch 选项是 Vue 实例的一个配置项，用于定义侦听器。它接受一个对象，对象的键是要监听的数据属性名，值是对应的回调函数。当监听的数据发生变化时，回调函数会被触发。

• 回调函数参数：回调函数接收两个参数，第一个是数据的新值（newVal），第二个是数据的旧值（oldVal）。
• 深度监听：如果需要监听对象内部属性的变化，可以使用 deep 选项。

watch: {
  someObject: {
    handler(newVal, oldVal) {
      console.log('someObject changed');
    },
    deep: true
  }
}

2. $watch 方法

$watch 是 Vue 实例的一个方法，用于动态添加侦听器。它接受两个参数：第一个是要监听的数据属性名（可以是字符串或函数），第二个是回调函数。

• 返回值：$watch 方法返回一个取消侦听的函数，调用该函数可以停止侦听。
• 立即执行：可以通过传递 { immediate: true } 选项来让回调函数在侦听器创建时立即执行一次。

const unwatch = vm.$watch('message', function(newVal, oldVal) {
  console.log('message changed from', oldVal, 'to', newVal);
}, { immediate: true });

// 停止侦听
unwatch();

3. 侦听器的应用场景

• 数据变化时的副作用：当某个数据变化时，需要执行一些副作用操作（如发送请求、更新 DOM 等）。
• 计算属性的替代：当计算属性的逻辑较为复杂时，可以使用侦听器来替代计算属性。
• 异步操作：在数据变化时执行异步操作（如 API 请求）。

4. 注意事项

• 性能开销：侦听器会在每次数据变化时执行回调函数，因此应避免在回调函数中执行复杂的操作，以免影响性能。
• 深度监听的性能问题：深度监听会递归遍历对象的所有属性，可能会导致性能问题，尤其是在监听大型对象时。

通过合理使用侦听器，可以在 Vue 应用中更好地响应数据变化，实现复杂的业务逻辑。