Vue3的watchEffect的妙用，与watch的区别

**Vue3中的watchEffect与watch的妙用**

在Vue3中，`watchEffect` 和 `watch` 是两个用于监视数据变化并执行回调函数的方法。虽然它们看起来很相似，但它们有着不同的使用场景和优点。

### watch`watch` 方法是 Vue2 中的一个老朋友，它允许我们监视某个响应式数据的变化，并在其发生时执行一个回调函数。它接受两个参数：第一个是要监视的数据，第二个是回调函数。

javascript// 监视 user 的变化watch(() => user, (newValue) => {
 console.log('user 变化了！', newValue)
})

`watch` 方法有几个缺点：

* 它会在每次渲染周期中执行一次回调函数，即使数据没有变化。
* 它会导致不必要的性能开销。

### watchEffect`watchEffect` 是 Vue3 中的一个新方法，它与 `watch` 类似，但它只在数据发生变化时才执行回调函数。它接受一个回调函数作为参数，这个回调函数会被自动清除，当其依赖的数据没有变化时。

javascript// 监视 user 的变化watchEffect(() => {
 console.log('user 变化了！', user)
})

`watchEffect` 方法有几个优点：

* 它只在数据发生变化时才执行回调函数，避免了不必要的性能开销。
* 它可以自动清除回调函数，当其依赖的数据没有变化时。

### 区别下面是 `watch` 和 `watchEffect` 的主要区别：

| 方法 | 监视数据变化 | 回调函数执行 |
| --- | --- | --- |
| watch | 每次渲染周期中执行一次回调函数 | 不会自动清除 |
| watchEffect | 只在数据发生变化时执行回调函数 | 会自动清除 |

### 示例下面是一个示例，展示了 `watch` 和 `watchEffect` 的使用场景。

javascript// data.jsexport default {
 user: 'John Doe',
 count:0,
}

javascript// App.vue<template>
 <div>
 {{ user }}
 <button @click="increment">+</button>
 </div>
</template>

<script>
import { watch, watchEffect } from 'vue'
import data from './data'

export default {
 setup() {
 // 监视 user 的变化 watch(() => data.user, (newValue) => {
 console.log('user 变化了！', newValue)
 })

 // 监视 count 的变化 watchEffect(() => {
 console.log('count 变化了！', data.count)
 })

 return {
 increment() {
 data.count++
 },
 }
 },
}
</script>

在这个示例中，我们使用 `watch` 监视 `user` 的变化，并使用 `watchEffect` 监视 `count` 的变化。每当 `count` 变化时，回调函数会被自动清除。

### 总结`watchEffect` 是 Vue3 中的一个新方法，它与 `watch` 类似，但它只在数据发生变化时才执行回调函数。它可以自动清除回调函数，当其依赖的数据没有变化时。虽然 `watch` 方法仍然有用，但 `watchEffect` 的使用场景更广泛，尤其是在监视复杂数据结构或频繁更新的数据时。

记住，选择合适的方法取决于你的具体需求。如果你需要在每次渲染周期中执行回调函数，那么 `watch` 就是正确的选择。如果你只需要在数据发生变化时执行回调函数，那么 `watchEffect` 就是更好的选择。