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