Vue3中的watch

86 阅读1分钟

今天继续和大家一起探讨在Vue3中的CompositionAPI中,是如何处理watch的,我们先看一段针对基础数据类型数据的编码方式。大家还可以关注我的微信公众号,蜗牛全栈。

const app = Vue.createApp({    
    setup(){        
        const { ref,watch } = Vue        
        const name = ref('lilei')        
        // 具有惰性        
        // 可以拿到当前值和之前的值        
        watch(name, (currentVal,preVal) => {            
            console.log(currentVal,preVal)        
        })        
        return {name}    
    },    
    template: `<div>Name:<input v-model="name" /></div>
                <div>Name is {{ name }}</div>`,    
    })
const vm = app.mount("#root")

同样,我们也可以针对引用数据类型,就像这样

const app = Vue.createApp({    
    setup(){        
        const { reactive,watch } = Vue        
        const nameObj = reactive({name:'lilei'})        
        watch(() => nameObj.name, (currentVal,preVal) => {            
            console.log(currentVal,preVal)        
        })        
        return {nameObj}    
    },    
    template: `<div> Name:<input v-model="nameObj.name" /> </div>        
            <div>Name is {{ nameObj.name }}</div>`,    
    })
const vm = app.mount("#root")

当然,watch不仅仅可以监控单一的数据,也可以监控多个数据的变化,就像这样

const app = Vue.createApp({    
    setup(){        
        const { reactive,watch,toRefs } = Vue        
        const nameObj = reactive({name:'lilei',englishname:'hanmeimei'})               watch(() => nameObj.name, (currentVal,preVal) => {            
            console.log(currentVal,preVal)        
        })
        watch(() => nameObj.englishname, (currentVal,preVal) => {            
            console.log(currentVal,preVal)        
        })
        const {name,englishname} = toRefs(nameObj)        
    return {name,englishname}     
},    
template: `<div>Name:<input v-model="name" /></div>        
            <div>Name is {{ name }}</div>        
            <div>EnglishName:<input v-model="englishname" /></div>        
            <div>EnglishName is {{ englishname }}</div>`,    
})
const vm = app.mount("#root")

同样,我们的代码有一些啰嗦,当然,我们也可以简写成这样

const app = Vue.createApp({    
    setup(){        
        const { reactive,watch,toRefs } = Vue        
        const nameObj = reactive({name:'lilei',englishname:'hanmeimei'})  
        // 要注意回掉函数的参数顺序和代表意思        
        watch([() => nameObj.name,() => nameObj.englishname], 
            ([curName,curNameEng],[preName,preNameEng]) => {            
                    console.log(curName,preName)            
                    console.log(curNameEng,preNameEng)        
        })
        const {name,englishname} = toRefs(nameObj)        
        return {name,englishname}     
    },    
    template: `<div>Name:<input v-model="name" /></div>
    <div>Name is {{ name }}</div>
    <div>EnglishName:<input v-model="englishname" /></div>        
    <div>EnglishName is {{ englishname }}</div>`,    
})
const vm = app.mount("#root")