Vue3中的watchEffect

Posted 飞鹰3995

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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特性远不只这些,更加详细的内容小编会在之后的实战中与大家一起分享。

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

 

以上是关于Vue3中的watchEffect的主要内容,如果未能解决你的问题,请参考以下文章

vue3 watchEffect 的使用

Vue3的 Composition API

vue3如何进行数据监听watch/watchEffect

vue3 watch监听 (immediate / deep / watchEffect)

vue3 watch监听 (immediate / deep / watchEffect)

Vue 3 Composition API - watchEffect 与 watch