• 售前

  • 售后

热门帖子
入门百科

vue3 watch和watchEffect的使用以及有哪些区别

[复制链接]
李悔之2015 显示全部楼层 发表于 2021-10-25 19:38:08 |阅读模式 打印 上一主题 下一主题
1.watch侦听器


引入watch
  1. import { ref, reactive, watch, toRefs } from 'vue'
复制代码
对根本数据类型进行监听----- watch特性:
1.具有一定的惰性lazy 第一次页面展示的时间不会实验,只有数据变化的时间才会实验
2.参数可以拿到当前值和原始值
3.可以侦听多个数据的变化,用一个侦听起承载
  1. setup() {
  2.         const name = ref('leilei')
  3.         watch(name, (curVal, prevVal) => {
  4.         console.log(curVal, prevVal)
  5. })
  6. }
  7. template: `Name: <input v-model="name" />`
复制代码
对引用类型进行监听-----
  1. setup() {
  2.         const nameObj = reactive({name: 'leilei', englishName: 'bob'})
  3. 监听一个数据
  4.         watch(() => nameObj.name, (curVal, prevVal) => {
  5.         console.log(curVal, prevVal)
  6. })
  7. 监听多个数据
  8.         watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
  9.         console.log(curName, curEng, '----', prevName, curEng)
  10.   setTimeout(() => {
  11.    stop1()
  12.   }, 5000)
  13. })
  14. const { name, englishName } = toRefs(nameObj)
  15. }
  16. template: `Name: <input v-model="name" /> englishName: <input v-model="englishName" />`
复制代码
2.watchEffect


没有过多的参数 只有一个回调函数
1.立刻实验,没有惰性,页面的初次加载就会实验。
2.主动检测内部代码,代码中有依赖 便会实验
3.不需要通报要侦听的内容 会主动感知代码依赖,不需要通报许多参数,只要通报一个回调函数
4.不能获取之前数据的值 只能获取当前值
5.一些=异步的操作放在这里会更加合适
  1. watchEffect(() => {
  2.         console.log(nameObj.name)
  3. })
复制代码
侦听器的取消 watch 取消侦听器用法相同
  1. const stop = watchEffect(() => {
  2.         console.log(nameObj.name)
  3. setTimeout(() => {
  4.         stop()
  5. }, 5000)
  6. })
  7. const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
  8.         console.log(curName, curEng, '----', prevName, curEng)
  9.   setTimeout(() => {
  10.    stop1()
  11.   }, 5000)
  12. })
复制代码
watch也可以变为非惰性的 立刻实验的 添加第三个参数 immediate: true
  1. watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
  2.         console.log(curName, curEng, '----', prevName, curEng)
  3.   setTimeout(() => {
  4.    stop1()
  5.   }, 5000)
  6. }, {
  7.         immediate: true
  8. })
复制代码
以上就是vue3 watch和watchEffect的利用以及有哪些区别的详细内容,更多关于vue3 watch和watchEffect的资料请关注草根技术分享别的相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作