watcher的handler中是如何获取到oldVal的?为什么在deep:true的情况下,Object引用类型的newVal和oldVal是一样的?
watcher的handler中是如何获取到oldVal的?为什么在deep:true的情况下,Object引用类型的newVal和oldVal是一样的?
如果是 V2
的话,因为响应式原理就是通过 Object.defineProperty
把这些 property
全部转为 getter/setter
。
所以在每次修改变量的时候(set
),就去回去触发 watch
,所以可以同时拿到新值和旧值。所以并不是说,变量值变更之后 watch
才会知道。
还没看过 V3
的源码,估计也是差不多,只不过 V3
通过 Proxy
去代替了原本的 getter/setter
。
然后来说第二个问题,如果 object
类型的你在通过 console.log
打印的时候会因为快照的关系只有第一层才会是你打印时的状态(不是必定),所以会出现在我们查看的时候前后值相同的情况。
一般我们在对比数据的时候如果层级比较深的属性,最好是直接打印想要看的具体的属性值。
比如说 console.log(a.b.c.d.e.f.g)
这样,保证最后输出的时候是一个固定的快照。
另外一个就是如果某一个属性值为引用类型的情况下,因为他只是引用具体指向的是一块内存地址,所以后来新值覆盖的时候,你看的就会是新赋值的数据。
8 回答5.1k 阅读✓ 已解决
6 回答3.2k 阅读✓ 已解决
6 回答3.9k 阅读✓ 已解决
9 回答2.9k 阅读
6 回答2.6k 阅读
5 回答6.7k 阅读✓ 已解决
2 回答2.1k 阅读✓ 已解决
v2
的watcher实例是有一个value
属性存储前一次的值,新的值是通过调用getter
获取的,所以可以拿到旧值。引用类型因为你并没有给它赋新值,所以它指向的是内存中的同一个对象,打印出来的也是同一个对象,如果你修改了这个对象上某个属性的值,可以直接将这个属性值打印来查看。