初步探索vue3之vue3中不一样的watch

vue3（3.0.4）中watch 使用

1. watch监听 ref 定义的响应式数据

setup() {
		let name = ref("张三");
		
        
		watch(name, (newValue, oldValue) => {
			console.log(newValue, oldValue);
		});

		return {
			name,
		};
	},

2.watch监听 ref 定义的多个响应式数据

setup() {
		let name = ref("张三");
        let msg = ref('hello')
		

		watch([name,msg], (newValue, oldValue) => {
			console.log(newValue, oldValue);
		});

		return {
			name,
            msg
		};
	},

或者 vue3可以同时出现多个watch

setup() {
		let name = ref("张三");
        let msg = ref('hello')
        
		watch(name, (newValue, oldValue) => {
			console.log(newValue, oldValue);
		});
		
		watch(msg, (newValue, oldValue) => {
			console.log(newValue, oldValue);
		});

		return {
			name,
            msg
		};
	},

3.watch监听 reactive 定义的响应式数据的全部属性

setup(props) {
		let name = ref("张三");
        let msg = ref('hello')
		let obj = reactive({
			a: 18,
			b: {
				c: {
					d: 23,
				},
			},
			g: 25
		});

		watch(name, (newValue, oldValue) => {
			console.log(newValue, oldValue);
		});
		watch(msg, (newValue, oldValue) => {
			console.log(newValue, oldValue);
		});

		watch(obj, (newValue, oldValue) => {
            console.log('obj已经变化了');
			console.log(newValue, oldValue);
		},{deep:false});

		return {
			name,
			obj,
            msg
		};
	},

这里需要注意的是(vue 3.0.4) 时
obj是一个对象时 newValue 和 oldValue 的值是相同的都为newValue 即无法获取oldValue
当obj对象有多层时也可以监听到 但是 deep:false 是无效的

4.watch监听 reactive 定义的多个响应式数据的某个属性

监听单个obj中的某一个属性时 需要时一个有返回值的函数

watch(()=>obj.a, (newValue, oldValue) => {
			console.log(newValue, oldValue);
			//obj已经变化了
			//Proxy {age: 19} Proxy {age: 19}
		});

如果监听的某个属性为多层时 此时需要配合 {deep:true} 才能监听到值的变化
但是依旧无法获取旧值

watch(()=>obj.b, (newValue, oldValue) => {
			console.log(newValue.c.d, oldValue.c.d);
		},{deep:true});

5.watch监听 reactive 定义的多个响应式数据的某些属性

监听多个时 可以为数组 也可以写为多个watch

watch([()=>obj.a,()=>obj.g], (newValue, oldValue) => {
			console.log(newValue, oldValue);
			//obj已经变化了
			//Proxy {age: 19} Proxy {age: 19}
		});

watchEffect

watchEffect 新增的一个特殊函数
默认一开始就会执行一次 只要是函数的引用的变量发生变化 整个函数就会执行一次
有点类似 computed 但又不需要返回值

watchEffect(()=>{
            let a = obj.b.c.d
            console.log('123');
        })