Vue3中watchEffect的使用指南

watchEffect的非惰性

Vue3中的watchEffect与计算属性不同，计算属性是惰性的，只有当其依赖项发生变化时，才会重新计算。而watchEffect是非惰性的，无论其依赖项是否发生变化，都会在每次组件重新渲染时重新执行。

watchEffect的清除副作用函数onInvalidate

Vue3中watchEffect提供了一个清除副作用函数onInvalidate，当watchEffect被销毁时，这个函数就会被调用。这可以用来清理任何副作用，例如定时器或网络请求。

如何优雅的使用Vue3的watchEffect

watchEffect可以用来实现各种各样的用例，例如：

• 监听状态的变化并更新UI
• 响应用户输入
• 执行异步操作
• 与外部库进行交互

在使用watchEffect时，需要注意以下几点：

• watchEffect是非惰性的，因此在使用时需要注意性能问题。
• watchEffect可以用来监听任何类型的数据，包括响应式对象、数组和函数。
• watchEffect可以与computed属性结合使用，以实现更复杂的逻辑。

watchEffect是一个非常强大的工具，可以帮助我们在Vue3中轻松地监听和响应状态的变化。通过合理地使用watchEffect，我们可以编写出更具响应性和交互性的应用程序。

示例代码

import { ref, watchEffect, onMounted, onUnmounted } from 'vue'

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

    // 监听count的变化，并更新UI
    watchEffect(() => {
      console.log(`count is now: ${count.value}`)
    })

    // 响应用户输入
    onMounted(() => {
      document.addEventListener('click', () => {
        count.value++
      })
    })

    // 在组件销毁时清理副作用
    onUnmounted(() => {
      document.removeEventListener('click', () => {
        count.value++
      })
    })

    return {
      count
    }
  }
}

在这段代码中，我们使用watchEffect来监听count的变化，并更新UI。我们还使用onMounted和onUnmounted来响应用户输入和清理副作用。