今天在要做的需求中遇到一个问题，就是根据数组中每个元素的变化执行相应的逻辑，然后用watch监听惊奇的发现：
export default {
data() {
return {
typeList: [
{
id: 1,
status: 0,
name: "蔬菜",
},
{
id: 2,
status: 0,
name: "水果",
},
{
id: 3,
status: 1,
name: "花卉",
},
],
};
},
watch: {
typeList: {
deep: true,
handler(newVal, oldVal) {
console.log("newVal", newVal);
console.log("oldVal", oldVal);
},
},
}
}
image1
经过查阅，可以大致这么理解：
因为监听的是一个对象，是一个引用类型，前后值指向同一个内存地址，它们索引同一个对象/数组，Vue 并不会保留修改之前值的副本。
所以，可以利用computed来解决
export default {
computed: {
tempArr() {
return JSON.parse(JSON.stringify(this.typeList));
},
},
watch: {
tempArr: {
deep: true,
handler(newVal, oldVal) {
console.log("newVal", newVal);
console.log("oldVal",oldVal);
},
},
}
}
