在vue3中很多地方相比较vue2语法过于自由,也可以说零碎,本篇下面来比较下在watch在vue2和vue3中的使用过程中的语法差异性
1 2 3 4 5 6 7 8 9 | watch: { obj: { handler(newVal, oldVal) { console.log(newVal, oldVal) }, immediate: true, // 初始化第一次是否执行 deep: true // 深度监听 } } |
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 // 同样,初始化执行 }) |
1 2 3 4 | watch(() => obj.arr, (newVal, oldVal) => { console.log(newVal, oldVal) }) // 注意,里面监听的是箭头函数 |
1 2 3 4 5 | watch([msg, str], (newVal, oldVal) => { console.log(newVal, oldVal) }, { immediate: true }) |
1 2 3 4 5 6 | watch([msg, str, ()=>obj.arr], (newVal, oldVal) => { console.log(newVal, oldVal) }, { immediate: true }) // 注意()=>obj.arr,监听数据某个对象是箭头函数形式 |
该方法实际可以理解为监听所有数据,当任何数据改变时候,都可以在里面获取到最新的值
1 2 3 | watchEffect(() => { console.log(msg.value) }) |
整体来看vue3的watch相比较vue2要复杂麻烦,只能多练练才能更好学习掌握了,官网Api地址
上一篇:【快速上手】vite打包配置详解—手把手教你配置vite
下一篇:Vue3中父子组件通信以及v-model双向数据传值
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"Vue3中watch使用方式及watchEffect光速了解"
最新评论