vue3.0 watchEffect
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。依赖即为函数中使用的ref/reactive对象的value用法:import { watchEffect } from 'vue'setup(){watchEffect(函数(){使用到了哪个ref/reactive对象.value,就监听哪个})}代码示例:<template><div><
·
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。
用法:
import { watchEffect } from 'vue'
setup()
{
watchEffect(函数(){
依赖追踪:
同步调用:
追踪所有依赖
异步调用:
只有在第一个 await 正常工作前访问到的 property 才会被追踪。
如下:只会追踪url.value作为依赖
const response = await fetch(url.value)
data.value = await response.json()
})
(1)停止侦听
隐式停止:
当watchEffect在组件的setup()函数或生命周期钩子被调用时,侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。
显示停止:
const xx=watchEffect(...)
xx.stop();
(2)清除副作用
watchEffect传入参数
watchEffect((onInvalidate)=>{
onInvalidate(()=>{
执行时机:
在副作用即将重新执行时
如果在setup()或生命周期钩子函数中使用了 watchEffect, 则在卸载组件时
})
})
(3)异步副作用以及清楚
副作用函数是一个异步函数时,清理函数必须要在Promise被resolve之前被注册,同时Vue依赖这个返回的Promise来自动处理Promise链上的潜在错误
watchEffect(async () => {
onInvalidate(() => {
/* ... */
})
data.value = await fetchData(props.id)
})
(4)副作用需要同步或在组件更新之前
watchEffect(
() => {
...
},
{
flush: 'sync', 'pre'在DOM更新前运行,'post'在DOM更新后运行,'sync'强制效果始终同步触发,默认为'pre'
}
)
(5)调试侦听器的行为(只能在开发模式下工作)
watchEffect(
() => {
...
},
{
onTrack(e){
当一个 reactive对象属性或一个 ref 作为依赖被追踪时触发
e.target包含了值
debugger
},
onTrigger(e) {
依赖项变更导致副作用被触发时
e.target包含了值
debugger
}
}
)
(2)watchPostEffect
和flush:'post' 效果一致,作为别名使用
(3)watchSyncEffect
和flush:'sync' 效果一致,作为别名使用
(4)卸载watchEffect时机
异步回调创建一个侦听器,那么它不会绑定到当前组件上,必须手动停止它,以防内存泄漏,同步则不用
需要手动卸载:
setTimeout(() => {
watchEffect(() => {})
}, 100)
代码示例:
<template>
<div>
<img src="./logo.png">
<h1>Hello Vue 3!</h1>
{{name}}{{obj.sex}}
<button @click="inc">Clicked {{ count }} times.</button>
</div>
</template>
<script>
import { ref,reactive,computed,readonly,watchEffect } from 'vue'
export default {
setup() {
let count = ref(0)
let res=1;
let name = ref('jeff')
const obj=reactive({sex:'male'})
const robj=readonly(obj);
let r=readonly('aa') //不具有只读的能力
watchEffect((onInvalidate)=>{
console.log(count.value);
onInvalidate(()=>{
console.log('清除');
clearInterval(timer);
})
}, {
onTrigger(e) {
console.log(e);
},
onTrack(e)
{
console.log('triger');
console.log(e)
}
})
const inc = () => {
timer=setInterval(()=>{
count.value++;
},1000)
}
return {
count,
inc,
name, //在setup返回对象中自动解套
obj
}
}
}
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
更多推荐
已为社区贡献20条内容
所有评论(0)