【vue3】watchEffect高级监听器

<!-- 高级监听器 -->

<template>
    <h1>watchEffect高级监听器</h1>
        <input v-model="name"/>
        <input v-model="name2"/>
        <button @click="stopWatch">停止监听</button>
</template>
    
<script setup lang='ts'>
    import {ref,watchEffect} from 'vue'

    let name = ref<string>('aaa')
    let name2 = ref<string>('bbb')
    
    /**
     * 一进来就会自动调用过一次
     */
    watchEffect((oninvalidate)=>{
        console.log('msg============',name.value,name2.value)
        /**
         * oninvalidate是一个回调函数
         * 可以在里面做节流防抖操作，或者在组件关闭时 清除未完成的接口请求
         */
        oninvalidate(()=>{
            console.log('before 在监听之前执行')
        })
    },{
            //额外的一些配置选项
            flush:'post' //pre-更新前执行  sync-强制效果始终同步触发  post-组件更新后执行
        })

    /**
     * 停止监听
     * watchEffect会返回一个停止监听的函数
     */
    const stop =   watchEffect(()=>{
        console.log('msg============',name.value,name2.value)
    })
    const stopWatch = ()=>stop()

</script>
    
<style>
    
</style>