Vue进阶——watch（监听）

什么是watch？

watch是一个用于监视（或侦听）响应式数据变化的功能。你可以使用watch来观察数据的变化并执行特定的操作，比如在数据变化时更新DOM、发送请求、或执行其他自定义逻辑。

watch的优缺点

优点：

1. 响应式数据监控：watch使你能够轻松地监视数据的变化，确保视图与数据保持同步。

2. 灵活性：watch非常灵活，允许你在数据变化时执行任何自定义操作，包括异步操作、DOM更新、网络请求等。

3. 计算属性变化的处理：你可以使用watch来监视计算属性的变化，执行与计算属性相关的操作。

4. 处理依赖关系：当数据之间存在依赖关系时，watch能够帮助你更新相关数据或视图，确保数据的一致性。

5. 动态数据处理：watch允许你在运行时根据数据的变化来执行操作，而不仅仅是在页面加载时。

缺点：

1. 复杂性：在复杂的组件中，使用watch可能会导致代码复杂性增加，因为你需要处理许多监视项，每个监视项都有自己的回调函数。

2. 性能开销：虽然watch的性能通常不是问题，但在某些情况下，如果监视的数据非常频繁地变化，可能会引入一些性能开销。

3. 难以维护：当组件中有大量的watch监视项时，可能会导致代码难以维护。建议对watch进行适度使用，将其限制在必要的情况下。

4. 不适合所有情况：并非所有数据变化都需要使用watch。在某些情况下，计算属性或侦听属性可能更适合处理数据的变化。

总的来说，watch是Vue中的一个有用工具，用于在数据变化时执行自定义操作，但需要根据具体情况和需求来决定是否使用，以及如何使用。在编写Vue应用时，要根据具体情况综合考虑使用watch、计算属性和侦听属性等不同的响应式数据处理方式。

如何使用watch

在下述示例中，我们创建了一个count数据属性，并使用watch选项来监视它的变化。每当count的值发生变化时，watch中的回调函数会被触发，从而可以执行自定义操作。

Vue2

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newCount, oldCount) {
      // 在 count 变化时执行的操作
      console.log(`Count changed from ${oldCount} to ${newCount}`);
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Vue3

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    watch(count, (newCount, oldCount) => {
      // 在 count 变化时执行的操作
      console.log(`Count changed from ${oldCount} to ${newCount}`);
    });

    return {
      count,
      increment,
    };
  },
};
</script>