网站建设格式,百度地图放到网站上,wordpress模板添加支付,企业网站建设优化一、Vue3的watch侦听器#xff1a;
1、基础用法侦听单个数据
导入watch函数执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
templatebutton clickadd{{ count }}/button
templatescript//导入watchimport {…一、Vue3的watch侦听器
1、基础用法侦听单个数据
导入watch函数执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
templatebutton clickadd{{ count }}/button
templatescript//导入watchimport { ref, watch } from vueconst count ref(0)const add () count.value//调用watch侦听变化//countref参数不需要加.valuewatchcountnewVlaoldVal {console.log(旧值为,oldVal,新值为,newVal)
}
script
2、侦听多个数据
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)const name ref(cp)// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName]){console.log(count或者name变化了[newCount, newName],[oldCount,oldName])})
/script
3、立即监听 immediate 在侦听器创建时立即发出回调响应式数据变化之后继续执行回调
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})},{immediate: true})
/script
4、深度监听 通过watch监听的ref对象默认是浅层侦听的直接修改嵌套的对象属性不会触发回调执行需要开启deep
script setup// 1. 导入watchimport { ref, watch } from vue// 这里有两个属性const state ref({ count: 0, age: 18 })// 2. 监听对象state 并开启deepwatch(state, (){console.log(数据变化了)},{deep:true})const changeStateByCount (){// 此时修改可以触发回调state.value.count}
/script
5、精确监听 开启deep的问题 它会递归地处理处理所有的值无论哪个属性被修改都会触发watch回调这可能会导致不必要的浪费。 watch(()state.value.name, (newVal, oldVal) {console.log(name变化了)})
二、区别
1、首先他们都可以监听数据对象和计算属性的变化Vue3的还可以监听ref和reactive的变化。
2、vue2可以监听单个属性或深度监听整个对象vue3默认只监听单个属性的变化不在支持深度监听如果需要深度监听需要使用deep来实现。
3、vue3中的回调函数可以接受到变化的新值和旧值作为参数方便进行比较处理。
