字数
492 字
阅读时间
2 分钟
副作用：执行某种操作，如对外部可变数据或变量的修改，外部接口的调用等
watchEffect 监听背景
生命周期：立即执行（在 onMounted 前调用）
javascript
watchEffect(async () => {
const response = await fetch(url.value)
data.value = await response.json()
})watchEffect 仅会在其同步执行期间，才追踪依赖
在使用异步回调时，只有在第一个 await 正常工作前访问到的属性才会被追踪
区别
- watch 会明确的监听某个数据源，而 watchEffect 会隐式的监听回调函数
同步执行过程中，所有能访问到的响应式属性 - watch 在数据初始化是不会触发回调的，而 watchEffect 会
回调的触发时机
默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态
需要指明 flush: 'post' 选项
js
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()
停止监听器
一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏
vue
<script setup>
import { watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
watchEffect(() => {})
}, 100)
</script>要手动停止一个侦听器，需调用 watch 或 watchEffect 返回的函数：
javascript
const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()条件式的监听来获取异步数据
javascript
// 需要异步请求得到的数据
const data = ref(null)
watchEffect(() => {
if (data.value) {
// 数据加载后执行某些操作...
}
})参考
贡献者
jiechen