Vue3 中的 watch 与 watchEffect

在 Vue3 中，响应式系统是其核心特性之一。为了能够监听到数据的变化并作出相应的操作，Vue 提供了多种方式来实现这一功能，比如 watch 和 watchEffect。这两个函数都是用来观察响应式状态变化的工具，但它们的工作方式和使用场景有所不同。

watch 函数

watch 函数用于监听特定的数据源（如一个 ref 或计算属性）的变化，并在变化时执行回调函数。它提供了一种更细粒度的控制，允许我们指定何时触发回调以及如何处理这些变化。

基本用法

------ - ---- ----- - ---- ------

----- ----- - -------

------------ -------- ------- -- -
  ------------------ ------- ------------- ------------
---

在这个例子中，每当 count 的值发生变化时，都会调用提供的回调函数，输出新的值和旧的值。

深度监听

如果你需要监听一个对象或数组的变化，可以使用 deep 选项来实现深度监听：

------ - --------- ----- - ---- ------

----- ----- - ----------
  ----- -
    ----- ----- -----
    ---- ---
  -
---

------
  -- -- -----------
  -------- ------- -- -
    ---------------------- ------- --------
  --
  - ----- ---- -
--

这里，通过返回一个嵌套的对象，我们可以对这个对象进行深度监听。当对象内部的任何属性发生变化时，回调函数都会被触发。

立即执行

默认情况下，watch 不会在初始时立即执行回调函数。如果需要在监听开始时立即执行一次回调，可以设置 immediate 选项为 true：

------------ -------- ------- -- -
  ------------------ ---- ------------
-- - ---------- ---- ---

这样，在组件挂载后，会立刻执行一次回调函数，输出初始值。

watchEffect 函数

watchEffect 是一种更简洁的方式来监听状态的变化。它会自动追踪依赖项，并在其依赖项发生变化时重新运行。这意味着你不需要显式地指定需要监听哪些状态，只需要提供一个函数，该函数中的所有依赖项都会被自动追踪。

基本用法

------ - ---- ----------- - ---- ------

----- ----- - -------

-------------- -- -
  --------------- ----- --- -----------------
---

在这个例子中，每当 count 的值发生变化时，回调函数内的代码会被重新执行，输出最新的 count 值。

清理副作用

有时候，我们的回调函数可能需要执行一些清理工作，例如取消网络请求、删除事件监听器等。watchEffect 提供了一个返回值，可以用来执行这样的清理操作：

--- ------

-------------------------- -- -
  -- --------------
  --------------- -- -
    --------------------
  ---

  -- -----------
  ----- - -------------- -- -
    --------------
  -- ------
---

在这个例子中，onInvalidate 函数接收一个回调作为参数，当依赖项发生变化或组件卸载时，该回调会被调用，从而执行必要的清理操作。

总结

watch 和 watchEffect 都是 Vue3 中强大的响应式监听工具，可以根据具体需求选择合适的方法。watch 更适合于需要精确控制监听时机和行为的情况，而 watchEffect 则提供了更为简便和直观的方式来处理状态变化。

希望这个章节能帮助你更好地理解和使用 Vue3 中的 watch 和 watchEffect。在实际开发过程中，灵活运用这两种方法将大大提高你的工作效率。