vue3 监听-watch

	import { watch } from 'vue'
	// 三个参数
	// 参数一：监听的数据
	// 参数二：数据发生改变执行的函数
	// 参数三：配置对象，深度监听等
 	watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

监听单个数据

watch(name, (newName, oldName) => {
  console.log("newName", newName);
});

监听多个数据

watch(name, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});
watch(age, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

// 或

watch([name, age], (newValue, oldValue) => {
  // 返回的数据是数组
  console.log("new", newValue, "old", oldValue);
});

监听proxy数据
1.此时vue3将强制开启deep深度监听
2.当监听值为proxy对象时，oldValue值将出现异常，此时与newValue相同

// 监听proxy对象
watch(person, (newValue, oldValue) => {
  console.log("newValue", newValue, "oldValue", oldValue);
});

监听proxy数据的某个属性
需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化

// 当监听proxy对象的属性为复杂数据类型时，需要开启deep深度监听
watch(
  () => person.Hobby,
  (newValue, oldValue) => {
    console.log("newValue",newValue, "oldvalue", oldValue);
  }
);

// 或者
watch([() => person.age, () => person.name], (newValue, oldValue) => {
  // 此时newValue为数组
  console.log("person.age", newValue, oldValue);
});