Vue3的watch侦听器以及与Vue2的watch的侦听器区别

**Vue3 的 Watch侦听器**

在 Vue3 中，Watch侦听器是用于监视组件内数据变化并触发相应逻辑的关键功能。与 Vue2 相比，Vue3 的 Watch侦听器有了一些重要的改进和区别。

**1. 简化的 API**

在 Vue3 中，Watch侦听器的 API 被简化为一个单独的函数 `watch()`，而不再需要使用 `$watch()` 或 `vm.$watch()` 的方式来调用。这个变化使得 Watch侦听器更加易于使用和理解。

**2. 支持多个侦听器**

Vue3 的 Watch侦听器支持同时监视多个数据源的变化。这意味着你可以在一个组件内定义多个 Watch侦听器来监视不同的数据源，而不需要担心它们之间的冲突或干扰。

**3. 支持深度侦听**

Vue3 的 Watch侦听器支持深度侦听，即它可以监视嵌套对象或数组的变化。例如，如果你有一个这样的数据结构：`{ a: { b: 'hello' } }`，Watch侦听器就可以监视 `a.b` 这样的路径上的变化。

**4. 支持立即执行**

Vue3 的 Watch侦听器支持立即执行，即它可以在组件初始化时立即触发一次。这个功能非常有用，因为它允许你在组件内进行一些需要立即执行的逻辑。

**5. 支持清除**

Vue3 的 Watch侦听器支持清除，即它可以手动清除已经注册的 Watch侦听器。这意味着你可以在某些情况下，例如组件销毁时，清除所有的 Watch侦听器。

**示例代码**

javascript// Vue3 的 Watch侦听器示例export default {
 data() {
 return {
 count:0,
 person: { name: 'John', age:30 }
 };
 },
 watch: {
 // 监视 count 变化 count(val, oldVal) {
 console.log(`count changed from ${oldVal} to ${val}`);
 },
 // 监视 person.name 变化 'person.name'(val, oldVal) {
 console.log(`person.name changed from ${oldVal} to ${val}`);
 }
 },
 mounted() {
 // 立即执行一次 this.count++;
 }
};

**与 Vue2 的 Watch 区别**

Vue2 的 Watch侦听器和 Vue3 的 Watch侦听器有以下几个区别：

1. **API**: Vue2 的 Watch侦听器需要使用 `$watch()` 或 `vm.$watch()` 的方式来调用，而 Vue3 的 Watch侦听器直接使用 `watch()` 函数。
2. **支持多个侦听器**: Vue3 的 Watch侦听器支持同时监视多个数据源的变化，而 Vue2 的 Watch侦听器只支持监视一个数据源的变化。
3. **深度侦听**: Vue3 的 Watch侦听器支持深度侦听，即它可以监视嵌套对象或数组的变化，而 Vue2 的 Watch侦听器不支持深度侦听。
4. **立即执行**: Vue3 的 Watch侦听器支持立即执行，即它可以在组件初始化时立即触发一次，而 Vue2 的 Watch侦听器不支持立即执行。

总之，Vue3 的 Watch侦听器比 Vue2 的 Watch侦听器更强大和灵活，它支持多个侦听器、深度侦听、立即执行和清除等功能。