VUE3之Composition API(二)

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是同时进行(不推荐)。

发表评论