前言
Vue中的watch属性大家都比熟悉,是vue的监听属性,监听数据的变化触发执行函数,可以监听数据和路由。这里给大家总结了一下watch在vue2和vue3中的使用详细,简单记录一下
一. watch的相关属性
1. handler(newVal, oldVal) {} ,
译:回调函数,变化时触发,有两个参数,一个是新值,一个是旧值;
2. immediate: true,
译:立即监听,开启时,页面加载时,默认执行一次;
3. deep: true,
译:深度监听,当监听的数据嵌套层级较深时,开启深度监听;
二. Vue2中的使用
data () {
return {
msg:'测试数据',
obj:{
a:1
}
}
},
//监听数据
watch:{
msg( newVal , oldVal ){ //普通函数式监听
console.log( newVal , oldVal )
},
msg:{
handler(newVal , oldVal){ //对象式监听,立即监听
console.log( newVal , oldVal )
},
immediate:true, //立即监听
},
obj:{
handler(newVal , oldVal){ //对象式监听,立即监听,深度监听
console.log( newVal , oldVal )
},
immediate:true, //立即监听
deep:true, //深度监听
}
}
三. Vue3中的使用
1. Vue3普通语法,setup(){}
export default{
setup(){
let msg = ref('测试数据');
let str = ref('测试数据str');
let obj = reactive({
a:1,
arr:['a','b','c']
})
//初始化监听
watch( msg , (newVal,oldVal)=>{
console.log( newVal,oldVal )
})
//初始化监听,开启立即监听
watch( msg , (newVal,oldVal)=>{
console.log( newVal,oldVal )
},{
immediate:true, //初始化立即监听
})
//同时监听多个数据,监听的数据写成数组形式
watch([msg,str],(newVal,oldVal)=>{
console.log( newVal,oldVal )
},{
immediate:true, //初始化立即监听
})
//监听对象中的某个对象时(适用于嵌套层级较深时使用,注意是箭头函数)
watch( ()=>obj.arr , (newVal,oldVal)=>{
console.log( newVal,oldVal )
})
//监听多个数据和深层对象时,同样
watch([msg,str,()=>obj.arr], (newVal,oldVal)=>{
console.log( newVal,oldVal )
})
//立即监听函数,监听多个数据时,我想知道哪个数据最先改变时使用
watchEffect(()=>{
console.log( msg.value )
})
return {
msg,
str,
obj
}
}
}
2. Vue3语法糖,<script setup></script>
<script setup>
//操作类型
let msg = ref('测试数据');
watch( msg , (newVal,oldVal)=>{
console.log( newVal,oldVal )
},{
immediate:true
})
</script>
四. 监听路由
watch:{
$route:{
handler(newval,oldval){
console.log(newval);//新路由信息
console.log(oldval);//老路由信息
},
immediate: true, //初始化监听,默认执行一次
deep: true, //深度监听
}
}