watchEffect
时间: 2023-07-12 22:44:52 浏览: 40
`watchEffect` 是 Vue3 中新增的一个 API,它可以让我们监听响应式数据的变化,并在回调函数中执行一些副作用操作。它的用法类似于 `watch`,但是 `watchEffect` 更加简洁、直观和易于使用。
`watchEffect` 首先会立即执行一次回调函数,并收集函数中响应式数据的依赖关系。当响应式数据变化时,会再次执行回调函数,并重新收集依赖。这样可以确保回调函数中使用的响应式数据的变化都能被监听到。
下面是一个示例,展示了如何使用 `watchEffect`:
```html
<template>
<div>
<p>count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const count = ref(0)
watchEffect(() => {
console.log(`count: ${count.value}`)
})
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
</script>
```
在这个例子中,我们定义了一个名为 `count` 的响应式变量,并使用 `watchEffect` 来监听它的变化。当 `count` 的值发生变化时,我们会在控制台中输出一个消息,展示当前的值。
我们还定义了一个 `increment` 函数,用于将 `count` 的值加一。在模板中,我们定义了一个按钮,当点击按钮时,会调用 `increment` 函数。
当我们点击按钮时,`count` 的值会发生变化,`watchEffect` 的回调函数会再次执行,并打印出当前的值。这样我们就可以在回调函数中执行一些副作用操作,例如发送网络请求、更新 DOM 等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)