Vue3中watch使用方式及watchEffect光速了解

作者：管理员 2022-05-20 10:17:37 分类：Vue3新篇章阅读（757） 0

在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 // 同样，初始化执行
})

监听“对象”中某个对象

剩余50%内容付费后可查看

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

上一篇：【快速上手】vite打包配置详解—手把手教你配置vite

下一篇：Vue3中父子组件通信以及v-model双向数据传值

Vue3中watch使用方式及watchEffect光速了解

vue2中使用watch

vue3中使用watch

参数说明

基本

初始化监听

监听“对象”中某个对象

相关推荐

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

点击取消