Vue第35篇，Vue中的watch监听属性，使用详细（vue2和vue3监听属性watch的使用）

前言

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,  //深度监听
    }
  }

感觉有用，就一键三连，感谢(●'◡'●)