vue中的watch介绍

Vue中的watch是一个非常有用的功能，它能够监听Vue实例数据的变化并执行相应的操作。以下是watch的详解：

1. 基本用法：watch可以监听data中声明的属性，当这些属性发生变化时，watch会触发对应的回调函数。这在需要对数据变化做出响应的场景下非常有用。
2. 深度监听：通过设置deep: true，watch可以监听对象内部值的变化，这对于复杂类型的数据监听尤其重要。
3. 立即触发：有时候我们希望在页面加载时就触发一次watch，可以通过设置immediate: true来实现这一点。
4. 取消监听：在某些情况下，我们可能需要停止监听数据的变化，这时可以使用unwatch方法来取消监听。
5. 与computed的区别：watch和computed都是Vue提供的响应式工具，但它们的使用场景不同。computed更适合用于依赖其他数据动态计算的值，而watch更适合用于观察数据变化并执行异步操作或较大开销的操作。
6. Vue 3中的watch：在Vue 3中，watch的用法有所变化，引入了ref和reactive来创建响应式数据，并使用watchEffect和watch来监听数据变化。Vue 3中的watch可以更灵活地处理不同类型的监听需求。
7. 注意事项：在使用watch时，需要注意的是，频繁的数据变化可能会导致性能问题，因此在设计应用时要合理使用watch，避免不必要的监听。

总的来说，watch是Vue中一个强大的工具，它能够帮助开发者更好地管理和响应数据变化。了解其工作原理和使用细节，可以在开发过程中更加高效地利用这一功能。

watch API介绍

watch(source, cb, options)

watch 共接收3个参数，下面一起看看这3个参数都有什么作用：

• source：需要侦听的响应式属性，这个属性可以是不同形式的“数据源”，例如：可以是一个 ref (包括计算属性)、可以是一个响应式对象、可以是一个 getter 函数、或多个数据源组成的数组。

• cb：回调函数。当侦听的响应式属性发生变化时，会触发这个回调函数，它也有3个参数：newValue：响应式属性变化后的值（新值）、oldValue：响应式属性变化前的值（旧值）、onInvalidate：该函数用于清除副作用。

• options:

• • immediate：是否在页面进入时就触发侦听器，值是一个布尔类型 true/false（默认false）。
• • deep：是否开启深层侦听。值是一个布尔类型 true/false（默认false）。
• • flush：值有3个，'pre' | 'post' | 'sync'（默认是 pre）。pre：指定的回调应该在渲染前被调用、post：可以用来将回调推迟到渲染之后的。如果回调需要通过 $refs 访问更新的 DOM 或子组件，那么则使用该值、sync：如果值设置为 sync，一旦值发生了变化，回调将被同步调用（少用，影响性能）。

watch的使用

在Vue中，watch选项或watch函数用于监视数据的变化并执行相应的操作。它允许你监听特定的数据源，并在数据发生变化时执行回调函数。

在Vue 3中，你可以在组件的setup函数中使用watch函数来监视数据的变化。下面是一个示例，展示了如何在Vue 3中使用watch函数：

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

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

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

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    function increment() {
      count.value++;
    }

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

在上面的示例中，我们使用ref函数创建了一个名为count的响应式变量，并将其初始值设置为0。然后，我们使用watch函数来监视count的变化。当count的值发生变化时，回调函数会被触发，并传递新值和旧值作为参数。

在模板中，我们展示了count的值，并提供了一个按钮，点击按钮时会调用increment方法来增加count的值。

当你点击按钮时，count的值会发生变化，watch函数会捕捉到这个变化，并执行回调函数。回调函数会打印出旧值和新值。

通过使用watch函数，你可以对数据进行细粒度的监视，并在数据变化时执行自定义的逻辑。这在处理异步操作、侦听器之间的依赖关系以及响应式数据的变化时非常有用。