watchEffect
时间: 2023-10-13 10:26:51 浏览: 45
6个用例快速理解vue3的watchEffect用法.pdf
`watchEffect` 是 Vue 3 Composition API 中的一个 API,它用于监听响应式数据的变化并执行相应的操作。与 `watch` 不同的是,它不需要指定要监听的数据或函数,而是自动追踪其依赖关系,并在其依赖项更改时重新运行传递的函数。
例如,以下代码使用 `watchEffect` 监听 `count` 的变化,并在每次 `count` 更改时更新页面上的计数器:
```js
import { reactive, watchEffect } from 'vue'
const state = reactive({ count: 0 })
watchEffect(() => {
console.log(`Count is ${state.count}`)
// 更新 DOM 上的计数器
})
```
当 `state.count` 更改时,`watchEffect` 会自动运行传入的函数,并输出新的计数值。因为 `watchEffect` 自动追踪依赖项,所以我们不需要手动指定要监听的数据或函数,它会自动处理。这使得代码更加简洁和易于维护。
阅读全文