前端 - 为什么vue监听到对象数据，但是对象内的值取不到？

Question

console.log(allDict);这句打印出来有值，为什么里面的值是undefined？

allDict: {      handler(allDict) {        console.log(allDict);        console.log(allDict.AnimalType);        Object.keys(allDict).forEach(key => console.log(key, allDict[key]));      },      deep: true,// 是否开启深度监听      immediate: true// 是否初始化时就执行一次    },

Answer 1

这个问题还真是高频，站内已经见过无数遍了，控制台打印的是快照，如果你在打印之后对该对象进行操作，你需要展开对象也就是前面那个小箭头才能看到最新的值，你看下面我在log后才添加属性，对象还是{}空的，但其实展开是有的

Answer 2

在 Vue 中，当你使用 watch 选项来监听一个对象时，默认情况下只会监听对象自身属性的变化，而不会监听对象内部值的变化。这就是为什么你能够监听到对象被赋值，但是无法监听到对象内部值的变化。

在你的代码中，allDict 是一个对象，并且你使用了 deep 选项将其设置为深度监听。这意味着当 allDict 对象的属性发生变化时，监听器会被触发。然而，你仍然无法获取到 allDict.AnimalType 的值，这是因为 AnimalType 是 allDict 对象的内部值，而不是一个属性。

要解决这个问题，你可以在 watch 选项中使用一个函数作为回调函数，并在回调函数中访问和操作 allDict 对象的内部值。例如：

watch: {  allDict: {    handler(newVal, oldVal) {      console.log(newVal);      console.log(newVal.AnimalType);      Object.keys(newVal).forEach(key => console.log(key, newVal[key]));    },    deep: true,    immediate: true  }}

在上面的代码中，handler 函数接收两个参数：newVal 和 oldVal。newVal 是新的 allDict 值，而 oldVal 是旧的 allDict 值。你可以在回调函数中访问 newVal.AnimalType 来获取 AnimalType 的值。