watch 的基本用法和深度监控
普通写法
watch: {
selectValue(newVal, oldVal) {
if (newVal != oldVal) {
this.selectValue = newVal;
this.changeSelect();
this.showTable();
}
},
category(newVal, oldVal) {
if (newVal != oldVal) {
this.category = newVal;
this.showTable();
}
},
},
深度监控
watch: {
// 监听mydata对象,属性值 handler 固定写法
mydata: {
handler: function (newVal, oldVal) {
if (newVal !== oldVal) {
// 做处理
this.getDataList();
}
},
deep: true,
// 代表开启深度监控。意思是数据的任何一个属性发生变化,监视函数需要执行
immediate: true,
// 如果immediate 设置为true, 代表代码一加载 立马执行监视函数
}
}
监控对象的属性(vue3写法)
vue3写法:监控对象的属性
import { reactive, ref, watch } from "vue";
// ...
// 监控这个对象中的gameName
const detailState = reactive({
groupId: "",
productName: "",
status: "0",
principalUserId: "",
operateUserId: "",
remark: "",
productGroupId: "",
gameName: [],
});
watch(()=>detailState.gameName,(n,o)=>{
if(n != o){
//...
}
});