[JavaScript知识库]Vue3中的watch

今天继续和大家一起探讨在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")

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈。

?

?