学习vue3 第八章 （watchEffect高级侦听器）

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

//用到几个监听几个 而且是非惰性 会默认调用一次

import {ref, watchEffect} from "vue"

let msg1 = ref("")
let msg2 = ref("")

watchEffect(() => {
    console.log(msg1.value) //监听msg1
    console.log(msg2.value) //监听msg2
})

清除副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

import {ref, watchEffect} from "vue"

let msg1 = ref("")
let msg2 = ref("")

watchEffect((oninvalidate) => {
    console.log(msg1.value) //监听msg1
    console.log(msg2.value) //监听msg2
    
    oninvalidate(() => {
        //先调用此函数
    })
})

停止跟踪

停止跟踪 watchEffect 返回一个函数 调用之后将停止更新

import {ref, watchEffect} from "vue"

let msg1 = ref("")
let msg2 = ref("")

const stop = watchEffect((oninvalidate) => {
    console.log(msg1.value) //监听msg1
    console.log(msg2.value) //监听msg2
    
    oninvalidate(() => {
        //先调用此函数
    })
}, {
    flush: "stop",
    onTrigger() {
        //调试watchEffect
    }

})

stop()

其他配置项

副作用刷新时机 flush 一般使用post

pre: 组件更新前执行

post:组件更新后执行

sync:强制效果始终同步触发