vue中的watch监听属性，使用详细（vue2和vue3监听属性watch的使用）

快来打我* 2023-10-04 23:39 74阅读 0赞

#### 简述：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**

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
    		}
    	}
    }

**vue3语法糖（setup）：**

**监听路由：**

watch:{
        $route:{
          handler(newval,oldval){
            console.log(newval);//新路由信息
            console.log(oldval);//老路由信息
          },
          immediate: true,  //初始化监听，默认执行一次
          deep: true,  //深度监听
        }
      }

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