vue3原理

AST

AST：抽象语法树，Abstract Syntax Tree。
TypeScript、babel、webpack、vue-cli都是依赖AST开发。

const a = 1

1. 词法分析阶段：拆成const、a、=、1

2. 语法分析阶段：转换成如下结构树

   
   
3. 代码生成阶段：将AST转换成机器指令代码，然后执行。

实现可响应对象

学习资料来源
2.x
判断是Object或Array。
Object用Object.defineProperty的getter/setter，递归侦测。
Array用prototype上的方法做拦截。
缺点：性能问题

3.x
包装成Proxy对象。
proxy

1. trap的默认行为，set和get。
2. 使用Reflect处理set的默认行为。
3. push操作，会触发两次set行为，因为value和length都改变了。
4. unshift会触发很多次set行为，原因同3。
5. set和get的reciver接收的是一个代理对象。
6. 多层级对象操作时，set不会被感知。Reflect.get返回的值，能返回对象的内部结构。这是proxy实现深度监测的原因。
7. 解决3和4中多次触发set的方法，使用setTimeout或者标志。
   instanceof
8. vue3实现数据的深度监测：遍历，用Reflect.get来返回多层对象的内层对象，对其再进行一次proxy。