vue3基本介绍

数据侦听watch

1.在vue3中，watch强制深度侦听了，无法通过参数配置修改
2.只能侦听ref定义的简单数据，或者reactive定义的对象或数组，例如：对象.属性，无法侦听,但是可以通过函数返回值的形式进行侦听，如下情况四
3.通过函数返回值侦听时，如果对象的属性也是一个对象时，此时对象的属性不具备强制deep为true的特性，需要手动加上{deep: true}进行深度侦听

setup() {
	let num = ref(0);
	let sex = ref('男');
	let people = reactive({
		name: 'xxx',
		age: '18',
	});
	
	return {
		people,
		num,
	}
}

情况一: 侦听ref定义的简单数据

watch(num, (newValue, oldValue) => {
	console.log(newValue, oldValue);
}, {immediate： true, deep: true});

情况二: 侦听对象

watch(people, (newValue, oldValue) => {
	// newValue与oldValue的值一样，vue3的bug
	console.log(newValue, oldValue);
}, {immediate： true});

情况三：侦听reactive定义的对象中的某个属性

// 错误： people.name改变不会触发回调
watch(people.name, (newValue, oldValue) => {
	// newValue与oldValue的值一样，vue3的bug
	console.log(newValue, oldValue);
}, {immediate： true});

// 正确方式
watch(() => people.name, (newValue, oldValue) => {
	// newValue与oldValue的值一样，vue3的bug
	console.log(newValue, oldValue);
}, {immediate： true});

情况四: 侦听数组,数组中有一个数据发生变化，就会触发侦听回调

// 侦听ref定义的多个响应式数据
watch([num, sex], (newValue, oldValue) => {
	console.log(newValue, oldValue);
}, {immediate： true});

// 侦听reactive定义的对象中的多个属性
watch([() => people.name, () => people.age], (newValue, oldValue) => {
	console.log(newValue, oldValue);
}, {immediate： true});

watchEffect函数