唯品秀前端博客

在vue3中很多地方相比较vue2语法过于自由,也可以说零碎,本篇下面来比较下在watch在vue2和vue3中的使用过程中的语法差异性

vue2中使用watch

1
2
3
4
5
6
7
8
9
watch: {
    obj: {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        immediate: true, // 初始化第一次是否执行
        deep: true // 深度监听
    }
}

vue3中使用watch

参数说明

  • source:可以是表达式或函数,用于指定监听的依赖对象
  • cb:依赖对象变化后执行的回调函数
  • options:可参数,可以配置的属性有 immediate(立即触发回调函数)、deep(深度监听)

基本

1
2
3
4
5
6
7
8
9
let book= reactive ({
  name: 'JavaScript高级程序设计',
  publish_time: 2022
})

watch(book, (newValue, oldValue) => {
  console.log('book---', newValue, oldValue)
})
// 默认依然初始化是获取不到旧的oldValue数据

初始化监听

1
2
3
4
5
6
7
8
9
10
let book= reactive ({
  name: 'JavaScript高级程序设计',
  publish_time: 2022
})

watch(book, (newValue, oldValue) => {
  console.log('book---', newValue, oldValue)
},{
  immediate:true // 同样,初始化执行
})

监听“对象”中某个对象

注意:在vue3中是没有deep深度监听选项的,因为

剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"Vue3中watch使用方式及watchEffect光速了解"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏