vue3学习--watch监听属性（基础）

import {watch,ref,reactive} from 'vue'
export default {
	let sum = ref(0)
	let msg = ref('hello')
	let person = reactive({
	    name:'张三',
	    age:20,
		job:{
		  j1:{
		    salary:20
		  }
		}
	})
	
	/* 监听一个值改变，第一个参数传递需要监听的属性 */
	watch('sum',(newVal,oldVal)=>{
	    console.log(newVal,oldVal)
	})
	
	/* 监听多个值的变化，已数组形式进行传递 */
	watch([sum,msg],(newVal,oldVal)=>{
	    console.log(newVal,oldVal)
	},{immediate:true})
	
	
	/**
	  监听对象，你会发现oldVval和newVal是一样的，无法获取正确的oldVal；
	  如果真的需要oldval可以拿出来使用ref进行定义；
	  并且通过reactive定义的数据开启了深度属性，手动修改deep配置无效
	*/
	watch(person,(newVal,oldVal)=>{
	    console.log(newVal,oldVal)
	})
	
	
	/* 监听对象里面的某一个属性
	第一个参数必须要写成函数的形式，注意这种情况下能获取到oldval
	*/
	watch(()=>person.name,(newVal,oldVal)=>{
	   console.log(newVal,oldVal)
	})
	
	
	/*
	监听对象里面的某一些属性
	*/
	watch([()=>person.name,()=>person.age],(newVal,oldVal)=>{
	   console.log(newVal,oldVal)
	})
	
	/*
	特殊情况，监听对象里面的object
	由于监听的是reactive定义对象中的某一个属性依然是一个对象，所以deep配置有效
	*/
	watch(()=>person.job,(newVal,oldVal)=>{
	   console.log(newVal,oldVal)
	},{deep:true})
	
	
	
	/**
	参数说明：vue3中的watch可以写多个，第一个参数是监听的属性名。第二个参数是回调函数，
	返回改变前的值和改变后的值，第三个参数是配置项；和vue2一样。immediate和deep这些属性
	写在配置项中；
	总结：1、监视reactive定义的响应数据是。oldValue 无法正确获取并且强制开启了深度监视，deep配置失效
		 2、监听reactive定义的响应式数据中的某一个属性时（必须是一个对象），deep配置有效
	*/
}