Vue - watchEffect()的使用

在 Vue 3 中，watchEffect() 是一个用于自动追踪响应式数据变化并执行副作用的 API。与 watch() 不同，watchEffect() 不需要手动指定要观察的数据，而是会自动根据内部访问的响应式数据进行依赖追踪。这使得 watchEffect() 更加简洁和直观，适用于某些需要副作用的场景。

简单说：立即执行一个函数，同时响应式地追踪其依赖，并在依赖的数据更改时重新执行该函数。

基本语法：

watchEffect(effect, options)

• 参数说明：
  • effect: 这是一个函数，包含你想要执行的副作用逻辑。该函数可以访问任何响应式数据，并在其变化时自动重新执行。
  • options: （可选）一个对象，允许你传入一些控制选项，比如 flush（执行时机）和 onStop（清理函数）。
    • 选项参数：可以传递一个选项对象，来控制执行时机和清理逻辑等
    • flush: 允许设定副作用的执行时机。可以是：
      • "pre": 在 DOM 更新前执行
      • "post": 在 DOM 更新后执行（默认值）
      • "sync": 同步执行
    • onStop: 在 stop 事件发生时调用的函数。

示例：

在上面的示例中，watchEffect 会自动追踪 sum 的变化。每当 sum 变换时，sum也会重新显示在页面上。

watchEffect(() => {
  // Some effect...
}, { flush: 'pre' });

总结：

• watchEffect() 允许更简洁地编写依赖于响应式数据的副作用。
• 它会根据访问的响应式数据自动触发副作用的重新执行。
• 支持清理操作和一些选项参数，有助于控制副作用的执行时机。

watch 对比 watchEffect :

1. 都能监视响应式数据的变化，不同的是监视数据变化的方式不同；
2. watch ： 要明确指出监视的数据；
3. watchEffect : 不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。