watchEffect
基本使用
watchEffect会自动收集响应式的依赖,对于一个watchEffect中的函数,它会在一开始自动执行一次,并记录到当中用到的响应式数据,以后每当这些响应式数据发生变化时,就会再次调用这个函数:
<script>
import { ref, watchEffect} from "vue";
export default {
setup() {
// watchEffect:自动收集响应式的依赖
const name =ref("sk");
const age=ref(18);
const changeName=()=> name.value="shopkeeper";
const changeAge=()=> age.value++;
watchEffect(()=>{
console.log("name:",name.value,"age:",age.value);
})
return {
name,
age,
changeName,
changeAge
}
}
}
</script>
停止侦听
watchEffect方法会返回一个方法,用于停止侦听:
<script>
import { ref, watchEffect} from "vue";
export default {
setup() {
// watchEffect:自动收集响应式的依赖
const name =ref("sk");
const age=ref(18);
const stop=watchEffect(()=>{
console.log("name:",name.value,"age:",age.value);
});
const changeName=()=> name.value="shopkeeper";
const changeAge=()=> {
age.value++;
if (age.value>25){
stop();
}
};
return {
name,
age,
changeName,
changeAge
}
}
}
</script>
watchEffect清除副作用
watchEffect的入参的函数中可以有一个入参,该入参也是一个函数,用于在再次执行watchEffect函数或watchEffect被停止时调用,一般取名为onInvalidate
const stop=watchEffect((onInvalidate)=>{
const timer=setTimeout(()=>{
console.log("网络请求成功");
},2000)
// 根据name和age两个变量发送网络请求
onInvalidate(()=>{
// 在这个函数中清除额外的副作用
// request.cancel();
clearTimeout(timer);
console.log("onInvalidate");
})
console.log("name:",name.value,"age:",age.value);
});
watchEffect的执行时机
watchEffect的入参的第二个参数可用于定义watchEffect的执行时机:
<script>
import { ref, watchEffect} from "vue";
export default {
setup() {
const title= ref(null);
watchEffect(()=>{
console.log(title.value);
},{
flush:"post"
});
return{
title
}
}
}
</script>
flush的取值:post为先挂载在执行、pre为先执行再挂载(默认)、sync是同时进行(不推荐)。