vue3+ts watch 整理

watch() 一共可以接受三个参数，侦听数据源、回调函数和配置选项

作用：监视数据的变化（和Vue2中的watch作用一致）

特点：Vue3中的watch只能监视以下四种数据：

ref定义的数据。
reactive定义的数据。
函数返回一个值（getter函数）。
一个包含上述内容的数组
ref 定义的数据

<template><div>str===={{ str }}</div><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPerson">点击修改部分属性</el-button><el-button @click="editPersonAll">点击修改全部</el-button><el-button @click="editString">修改基本数据类型</el-button></div>
</template><script setup lang="ts">
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
// let str: Ref<string> = ref("AAA"); // 泛型写法
let str = ref("AAA");
let personObj = ref<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPerson = () => {personObj.value.name = "bbb";
};
const editPersonAll = () => {personObj.value.car = {price: 222,color: "blue",};
};const editString = () => {str.value = "Bbb";
};
// 监听基本数据类型变化
watch(() => str.value,(newValue, oldValue) => {console.log("监听基本数据类型变化newValue");console.log(newValue);console.log(oldValue);}
);
// 监听对象类型某个值的变化
watch(() => personObj.value.name,(newValue, oldValue) => {console.log("personObj.value.name");console.log("newValue==" + newValue);console.log("oldValue==" + oldValue);}
);/* 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视watch的第一个参数是：被监视的数据watch的第二个参数是：监视的回调watch的第三个参数是：配置对象（deep、immediate等等.....） */
watch(personObj,(newValue, oldValue) => {console.log("修改整个车");console.log("newValue==");let { car, name, age } = toRefs(newValue);console.log(car, name.value, age.value);console.log("oldValue==");// let {car,name,age} = toRefs(oldValue)// console.log(car,name,age);},{deep: true,}
);
</script><style scoped></style>

reactive 定义的数据
ref 写法

<template><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPerson">点击修改部分属性</el-button><el-button @click="editPersonAll">点击修改全部</el-button></div>
</template>
<script setup lang="ts">
import { reactive, watch, ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj = reactive<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPerson = () => {personObj.name = "bbb";
};
const editPersonAll = () => {personObj.car = {price: 222,color: "blue",};
};
//监听基本数据类型的写法
watch(() => personObj.name,(newValue, oldValue) => {console.log("newValue==" + newValue);console.log("oldValue==" + oldValue);}
);
监听对象类型的写法 (推荐使用这种方法)
// watch(
//   () => personObj.car,
//   (newValue, oldValue) => {
//     console.log("修改整个车");
//     console.log("newValue==" + newValue);
//     console.log("oldValue==" + oldValue);
//   }
// );
监听对象类型的写法
watch(personObj.car, (newValue, oldValue) => {console.log("修改整个车");console.log("newValue==" + newValue);console.log("oldValue==" + oldValue);
});
</script>

监听多个值变化
ref 写法

<template><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPersonName">点击修改name</el-button><el-button @click="editPersonCarColor">点击修改car-color</el-button></div>
</template><script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj = ref<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPersonName = () => {personObj.value.name = "bbb";
};
const editPersonCarColor = () => {personObj.value.car.color = "bule";
};// 监听对象类型某个值的变化
// 传入的是数组， 获取到的newValue 也是数组，一一对应的关系
watch([() => personObj.value.name, personObj.value.car],(newValue, oldValue) => {console.log("personObj.value--watch");console.log(newValue);console.log(oldValue);},{deep: true,}
);
</script><style scoped></style>

reactive 写法

<template><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPersonName">点击修改name</el-button><el-button @click="editPersonCarColor">点击修改car-color</el-button></div>
</template><script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj = reactive<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPersonName = () => {personObj.name = "bbb";
};
const editPersonCarColor = () => {personObj.car.color = "bule";
};// 监听对象类型某个值的变化
// 传入的是数组， 获取到的newValue 也是数组，一一对应的关系
watch([() => personObj.name, personObj.car],(newValue, oldValue) => {console.log("personObj.value--watch");console.log(newValue);console.log(oldValue);},{deep: true,}
);
</script><style scoped></style>