Vue.js 设计与实现 - 05 非原始值的响应式方案

上一章中,着重讨论了响应系统的概念和实现,并简单介绍了响应式数据的基本原理。本章中我们把目光聚焦在响应式数据本身,深入探讨实现响应式数据需要考虑哪些内容,其中的难点是什么。除了拦截 get、set 操作外,还需要考虑其他问题,比如 追踪拦截for…in 循环?如何代理数组、对象、Set、Map 等类型的数据。想要实现完善的响应式数据,需要深入语言规范(ECMA-262)。

第二篇 响应系统 Proxy Reflect

5.1 理解 Proxy 和 Reflect

5.2 JavaScript 对象及 Proxy 的工作原理

JS 中有两种对象:常规对象(ordinary object)、异质对象(exotic object)

如何区分一个对象是普通对象还是函数呢?一个对象在什么情况下才能作为函数调用呢?答案是通过内部方法和内部槽来区分对象,例如函数对象会部署内部方法 [[Call]]

了解了内部方法,就可以解释什么是常规对象,什么是异质对象。满足以下三点要求的对象就是常规对象:

5.3 如何代理 Object

5.4 合理地触发响应

5.5 浅响应和深响应

5.6 只读和浅只读

5.7 代理数组

在 JS 中,数组只是一个特殊的对象,为了实现对数组的代理,有必要了解相比普通对象,数组有哪些特殊的特性。

5.8 代理 Set 和 Map

5.9 总结