effect 和 watchEffect 有啥区别
effect 和 watchEffect 都是在 Vue 3 中用于创建响应式副作用函数的函数，它们之间有一些区别。
-
依赖追踪方式:
effect函数会自动追踪其内部使用的响应式数据，并在数据变化时重新运行。它会追踪函数体内部使用的所有响应式数据，无论是否直接访问了这些数据。watchEffect函数也会自动追踪其内部使用的响应式数据，但它会更加精确地追踪数据的依赖关系。它会分析函数体内部直接访问的响应式数据，并在这些数据变化时重新运行。这意味着它只会追踪被实际使用的响应式数据。
-
使用方式:
effect函数接收一个回调函数作为参数，并立即执行该回调函数。它不会返回一个清理函数。watchEffect函数也接收一个回调函数作为参数，但它会在组件渲染时立即执行一次，并在其内部使用的响应式数据发生变化时重新运行。它会返回一个清理函数，用于在组件卸载或依赖变化时执行清理操作。
根据您的需求，可以选择使用 effect 或 watchEffect 。如果您需要精确追踪数据的依赖关系，可以使用 watchEffect 。如果您只需要简单地追踪所有响应式数据的变化，可以使用 effect 。
effect 和 watchEffect 哪个性能好
在性能方面， effect 和 watchEffect 的差异不大，因为它们都是使用类似的响应式机制来追踪数据变化并执行副作用函数。
然而，由于 watchEffect 会更精确地追踪数据的依赖关系，它可能会在某些情况下比 effect 更高效。因为 watchEffect 只会追踪被实际使用的响应式数据，而不会追踪所有的响应式数据。
如果您只需要简单地追踪所有响应式数据的变化，并执行相应的副作用函数，那么使用 effect 可能更合适。而如果您需要更精确地追踪特定的响应式数据依赖，并在数据变化时执行副作用函数，那么使用 watchEffect 可能更适合。
总的来说，在大多数情况下，它们的性能差异不会对应用产生显著影响。您可以根据具体的需求选择使用 effect 或 watchEffect ，并根据代码的可读性和维护性做出决策。
watchEffect 怎么清理
在 Vue 3 中，使用 watchEffect 创建的副作用函数会返回一个清理函数，用于在组件卸载或依赖变化时执行清理操作。
以下是使用 watchEffect 的清理示例：
import { watchEffect, reactive } from 'vue'
const state = reactive({
count: 0
})
const stop = watchEffect(() => {
console.log(`count 的值为：${state.count}`)
})
// 在其他地方修改 state.count 的值
state.count = 1
// 在适当的时机执行清理操作
stop()
在上面的示例中，我们使用 watchEffect 创建了一个副作用函数，并将其赋值给 stop 变量。当需要执行清理操作时，只需调用 stop() 函数即可。
执行 stop() 后，副作用函数将不再被触发，也不会再追踪响应式数据的变化。
请注意，在组件卸载时，Vue 3 会自动清理 watchEffect ，无需手动执行 stop() 。但在某些情况下，您可能需要手动清理副作用函数，例如在条件渲染的组件中，当条件变为 false 时，手动执行 stop() 可以避免不必要的副作用函数执行。
