• watch监听器
  • 具备一定的惰性 lazy ( 页面第一次加载的时候不会监听 )
  • 参数可以拿到原始和当前的值
  • 基本数据类型 和 对象的用法略有不同

基本用法

const app = Vue.createApp({
    setup(){
        const {reactive , watch , toRefs} = Vue;
        const  name = reactive(0);
        /* 基本数据类型
        watch(name,(newValue,oldValue)=>{
            console.log(newValue,oldValue)
        })
        */
        // 引用类型
        const nameObj = reactive({name:"dell"})
        const {name} = toRefs(nameObj)
        watch(()=>nameObj.name,(newValue,oldValue)=>{
            console.log(newValue,oldValue)
        })
        return {name}
    },
    template:`
        <div>
            <div>
                Name: <input v-model="name">
            </div>
            <div>
                name is {{name}}
            </div>
        </div>  
    `
})
​

用一个监听器承载,多个数据的变化

const app = Vue.createApp({
    setup(){
        const {reactive,watch,toRefs} = Vue;
        const nameObj = reactive({
            name:"dell",
            engName:"lee"
        })
        watch([()=>nameObj.name,()=>nameObj.engName],([newName,newEngNam],[oldName,oldEngName])=>{
            console.log(newName,oldName)
            console.log(newEngNam,oldEngName)
        },{immediate:true}) // {immediate:true} 实现watchEffecti的非惰性监听
        const {name,engName} = toRefs(nameObj)
        return {name , engName}
    }
})

watchEffect

• 立即执行,没有惰性 immediate
• 不需要传递要侦听的内容, 自动会感知代码依赖 , 不需要传递很多参数 , 只要传递一个回调函数
• 不能获取之前的数据值

const app = Vue.createApp({
    setup(){
        const {reactive,watchEffect,toRefs} = Vue;
        const nameObj = reactive({
            name:"dell",
            engName:"lee"
        })
        watchEffect(()=>{
            console.log(nameObj.name);
            console.log(nameObj.engName)
        })
        const {name,engName} = toRefs(nameObj)
        return {name , engName}
    }
})