AST
AST：抽象語(yǔ)法樹(shù)，Abstract Syntax Tree浪漠。
TypeScript、babel霎褐、webpack址愿、vue-cli都是依賴AST開(kāi)發(fā)。
const a = 1
- 詞法分析階段：拆成const冻璃、a响谓、=、1
-
語(yǔ)法分析階段：轉(zhuǎn)換成如下結(jié)構(gòu)樹(shù)
- 代碼生成階段：將AST轉(zhuǎn)換成機(jī)器指令代碼省艳，然后執(zhí)行娘纷。
實(shí)現(xiàn)可響應(yīng)對(duì)象
學(xué)習(xí)資料來(lái)源
2.x
判斷是Object或Array。
Object用Object.defineProperty的getter/setter跋炕，遞歸偵測(cè)赖晶。
Array用prototype上的方法做攔截。
缺點(diǎn)：性能問(wèn)題
3.x
包裝成Proxy對(duì)象辐烂。
proxy
- trap的默認(rèn)行為遏插，set和get。
- 使用Reflect處理set的默認(rèn)行為纠修。
- push操作胳嘲，會(huì)觸發(fā)兩次set行為，因?yàn)関alue和length都改變了扣草。
- unshift會(huì)觸發(fā)很多次set行為了牛，原因同3。
- set和get的reciver接收的是一個(gè)代理對(duì)象辰妙。
- 多層級(jí)對(duì)象操作時(shí)鹰祸，set不會(huì)被感知。Reflect.get返回的值上岗，能返回對(duì)象的內(nèi)部結(jié)構(gòu)福荸。這是proxy實(shí)現(xiàn)深度監(jiān)測(cè)的原因。
- 解決3和4中多次觸發(fā)set的方法肴掷，使用setTimeout或者標(biāo)志敬锐。
instanceof - vue3實(shí)現(xiàn)數(shù)據(jù)的深度監(jiān)測(cè)：遍歷，用Reflect.get來(lái)返回多層對(duì)象的內(nèi)層對(duì)象呆瞻，對(duì)其再進(jìn)行一次proxy台夺。
