vue3 watch和watchEffect的使用以及有哪些区别
2021-02-01 04:07
1986 查看
1.watch侦听器
引入watch
import { ref, reactive, watch, toRefs } from 'vue'
对基本数据类型进行监听----- watch特性:
1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行
2.参数可以拿到当前值和原始值
3.可以侦听多个数据的变化,用一个侦听起承载
setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => { console.log(curVal, prevVal) }) } template: `Name: <input v-model="name" />`
对引用类型进行监听-----
setup() { const nameObj = reactive({name: 'leilei', englishName: 'bob'}) 监听一个数据 watch(() => nameObj.name, (curVal, prevVal) => { console.log(curVal, prevVal) }) 监听多个数据 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', prevName, curEng) setTimeout(() => { stop1() }, 5000) }) const { name, englishName } = toRefs(nameObj) } template: `Name: <input v-model="name" /> englishName: <input v-model="englishName" />`
2.watchEffect
没有过多的参数 只有一个回调函数
1.立即执行,没有惰性,页面的首次加载就会执行。
2.自动检测内部代码,代码中有依赖 便会执行
3.不需要传递要侦听的内容 会自动感知代码依赖,不需要传递很多参数,只要传递一个回调函数
4.不能获取之前数据的值 只能获取当前值
5.一些=异步的操作放在这里会更加合适
watchEffect(() => { console.log(nameObj.name) })
侦听器的取消 watch 取消侦听器用法相同
const stop = watchEffect(() => { console.log(nameObj.name) setTimeout(() => { stop() }, 5000) }) const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', prevName, curEng) setTimeout(() => { stop1() }, 5000) })
watch也可以变为非惰性的 立即执行的 添加第三个参数 immediate: true
watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', prevName, curEng) setTimeout(() => { stop1() }, 5000) }, { immediate: true })
以上就是vue3 watch和watchEffect的使用以及有哪些区别的详细内容,更多关于vue3 watch和watchEffect的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:相关文章推荐
- volatile、synchronized、lock有什么区别,以及在哪些场景下使用哪种方式?
- Vue中watch、computed、updated三者的区别以及使用方法
- Vue中watch、computed、updated三者的区别以及使用方法
- volatile、synchronized、lock有什么区别,以及在哪些场景下使用哪种方式?
- VC.Net中创建与使用静态链接库(lib)和动态链接库(dll),以及它们的区别.
- String,StringBuffer,StringBuilder之间的区别,以及使用中该注意什么(转)
- pl的使用以及与Dll的区别
- java session HttpSessionListener、HttpSessionBindingListener使用区别,实现在线人数统计以及踢出用户
- lib 和 dll 的区别、生成以及使用详解
- Asp.net MVC验证哪些事(2)-- 验证规则总结以及使用
- java中yield(),sleep()以及wait()的区别往往混淆了这三个函数的使用。
- C#hashtable使用说明 以及 Hashtable和HashMap的区别【总结性】
- df和du的区别以及磁盘空间使用问题
- HandlerThread 之于Thread区别以及使用规则
- lib 和 dll 的区别、生成以及使用详解
- 关于使用count(X) 函数的说明(附加:关于null的说明以及和0的区别)
- Oracle PGA和SGA区别以及latch和lock的使用场合
- Java中Date,Calendar,Timestamp的区别以及相互转换与使用 详细出处参考:http://www.jb51.net/article/41076.htm
- application 和 session区别以及使用application存储在线用户的session信息
- C#基础篇 重写与重载,以及其中设计的虚方法和抽象方法的使用和区别