Vue3中的watchEffect
2022-01-10 18:18
381 查看
昨天和大家一起分享了关于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的区别
-
watch默认是惰性的,watchEffect默认立即执行
-
watch可以获取到当前值和之前值,watchEffect只能获取当前值
-
watch可以传递多个函数作为参数,watchEffect只需要传递一个回调函数
其实关于watch和watchEffect特性远不只这些,更加详细的内容小编会在之后的实战中与大家一起分享。
大家还可以扫描下面的二维码,关注我的微信公众号,蜗牛全栈
相关文章推荐
- vue3 watch和watchEffect的使用以及有哪些区别
- vue3修改link标签默认icon无效问题详解
- vue3.x的新特性研究
- Vue3 引入Element-ui报错
- Vue3 对 Web 应用性能的改进[每日前端夜话0xE1]
- Vue3基础(五)___watch
- VUE3 之 template 语法
- VUE3 之 全局组件与局部组件
- vue3 template refs dom的引用、组件的引用、获取子组件的值
- 详解Vue3中对VDOM的改进
- 解决 Vue3 版本的跨域问题
- Vue3对于一个前端来讲意味着什么?
- Vue3全局APi解析-源码学习
- Vue2与Vue3的组件通讯对比
- VUE3 之 组件传参
- vue3 createComponent
- 详解Vue3 Composition API中的提取和重用逻辑
- 尤雨溪 Vue2 设计过程 Vue3 的蜕变?
- Vue3中的简单插件写法
- 08 - Vue3 UI Framework - Input 组件