Vue3中的watchEffect

昨天和大家一起分享了关于CompositionAPI中的watch，今天继续探讨与watch类似的watchEffect，下面是示例代码。大家还可以关注我的微信公众号，蜗牛全栈。

const app = Vue.createApp({setup() {    
    const { reactive, watch, toRefs,watchEffect } = 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)    
    })
    // 立即执行的，没有惰性    
    watchEffect(() => {         
        console.log('abc') // 没有其他数据依赖    
    })
    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")

打开控制台，我们发现，在控制台直接就打印出了abc，我们再修改数据的时候，watchEffect里面的逻辑再也没有执行。根据官方解释，是因为逻辑里面的数据（abc）没有其他数据依赖，我们把回调函数改成以下内容的时候，我们再去修改name属性值的时候，里面的回调函数就会执行。

const app = Vue.createApp({
    setup() {    
        const { reactive, watch, toRefs,watchEffect } = 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)    
        })
        // 立即执行的，没有惰性    
        watchEffect(() => {         
            console.log(nameObj.name) // 依赖相应数据nameObj.name    
        })
        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")

如果我们也想让watch里面的回调函数执行的时候，我们只需要在watch中添加一个参数就可以了，参数是一个对象，就像这样

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)    
        },
        {immediate:true // 不是惰性的，立即执行    
    })
    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")

有的时候，我们还想停止监控，这个对于watch和watchEffect是一致的，我以watchEffect为例

const app = Vue.createApp({
    setup({    
        const { reactive, toRefs,watchEffect } = Vue    
        const nameObj = reactive({ name: 'lilei', englishname: 'hanmeimei' })
        const stop = watchEffect(() => {         
            console.log(nameObj.name) // 依赖相应数据nameObj.name         
            setTimeout(() => {stop() },5000) // 5s之后结束watchEffect    
        })
    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")

下面小编总结一下watch和watchEffect的区别

1、watch默认是惰性的，watchEffect默认立即执行

2、watch可以获取到当前值和之前值，watchEffect只能获取当前值

3、watch可以传递多个函数作为参数，watchEffect只需要传递一个回调函数 其实关于watch和watchEffect特性远不只这些，更加详细的内容小编会在之后的实战中与大家一起分享。