數(shù)據(jù)的雙向綁定的原理
重構(gòu)響應(yīng)式系統(tǒng)敷硅，使用Proxy替換Object.defineProperty
Object.defineProperty的原理：通過(guò)使用 Object.defineProperty 來(lái)劫持對(duì)象屬性的 geter 和 seter 操作，當(dāng)數(shù)據(jù)發(fā)生改變發(fā)出通知翩概。Vue2.x版本中的雙向綁定不能檢測(cè)到下標(biāo)的變化。
porxy原理：通過(guò)ES6的新特性proxy來(lái)劫持?jǐn)?shù)據(jù)羹膳，當(dāng)數(shù)據(jù)改變時(shí)發(fā)出通知两嘴。proxy可以劫持整個(gè)對(duì)象，并返回一個(gè)新對(duì)象箩绍。
性能的提升
diff方法優(yōu)化
Vue2 中的虛擬dom是進(jìn)行全量的杜比
Vue3 新增了靜態(tài)標(biāo)記（PatchFlag），只比對(duì)帶有 PF 的節(jié)點(diǎn)尺上，并且通過(guò) Flag 的信息得知
當(dāng)前節(jié)點(diǎn)要比對(duì)的具體內(nèi)容材蛛。
靜態(tài)提升
Vue2中無(wú)論元素是否參與更新, 每次都會(huì)重新創(chuàng)建, 然后再渲染
Vue3中對(duì)于不參與更新的元素, 會(huì)做靜態(tài)提升, 只會(huì)被創(chuàng)建一次, 在渲染時(shí)直接復(fù)用即可
cacheHandlers 事件偵聽(tīng)器緩存
Vue2默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定, 所以每次都會(huì)去追蹤它的變化
Vue3但是因?yàn)槭峭粋€(gè)函數(shù)，所以沒(méi)有追蹤變化, 直接緩存起來(lái)復(fù)用即可
ssr渲染
Vue2當(dāng)有大量靜態(tài)的內(nèi)容時(shí)候怎抛，這些內(nèi)容會(huì)被當(dāng)做純字符串推進(jìn)一個(gè)buffer里面卑吭， 即使存在動(dòng)態(tài)的綁定，會(huì)通過(guò)模板插值嵌入進(jìn)去马绝。這樣會(huì)比通過(guò)虛擬dmo來(lái)渲染的快上很多很多陨簇。
Vue3當(dāng)靜態(tài)內(nèi)容大到一定量級(jí)時(shí)候，會(huì)用_createStaticVNode方法在客戶端去生成一個(gè)static node迹淌，這些靜態(tài)node，會(huì)被直接innerHtml己单，就不需要?jiǎng)?chuàng)建對(duì)象唉窃，然后根據(jù)對(duì)象渲染。
按需編譯纹笼，體積更形品荨（Tree shaking）
Tree-shaking 使編譯更友好，比如，如果你的項(xiàng)目沒(méi)有用到watch蔓涧，那編譯時(shí)就會(huì)把tree shaking掉件已。
Compostion API: 組合API/注入API
Vue2的組件內(nèi)，使用的是Option API風(fēng)格(data/methods/mounted)來(lái)組織的代碼元暴，這樣會(huì)讓邏輯分散篷扩，舉個(gè)例子就是我們完成一個(gè)計(jì)數(shù)器功能，要在data里聲明變量茉盏，在methods定義響應(yīng)函數(shù)鉴未，在mounted里初始化變量，如果在一個(gè)功能比較多鸠姨、代碼量比較大的組件里铜秆，你要維護(hù)這樣一個(gè)功能，就需要在data/methods/mounted反復(fù)的切換到對(duì)應(yīng)位置讶迁，然后進(jìn)行代碼的更改连茧。
Vue3中，使用setup函數(shù)巍糯。如下所示跟count相關(guān)的邏輯啸驯，都放到counter.js文件里，跟todo相關(guān)的邏輯放到todos.js里鳞贷。
自定義渲染API（Custom Renderer API）
Vue2.x最開(kāi)始支持運(yùn)行在瀏覽器中坯汤，渲染到瀏覽器的dom上，隨著vue的流行搀愧，出現(xiàn)了weex和myvue惰聂。
Vue2.x項(xiàng)目架構(gòu)對(duì)于這種渲染到不同平臺(tái)不太友好，
Vue3.0推出了自定義渲染API解決了該問(wèn)題咱筛。
vue官方實(shí)現(xiàn)的 createApp 會(huì)給我們的 template 映射生成 html 代碼搓幌，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之類的不是html的代碼的時(shí)候迅箩，那就需要用到 Custom Renderer API 來(lái)定義自己的 render 渲染生成函數(shù)了溉愁。
vite開(kāi)發(fā)構(gòu)建工具
Vue2是使用webpack作為開(kāi)發(fā)構(gòu)建工具的，npm run dev都要等一會(huì)饲趋，項(xiàng)目越大等的時(shí)間越長(zhǎng)
Vue3是使用vite來(lái)做開(kāi)發(fā)構(gòu)建工具拐揭。vite支持瀏覽器支持import關(guān)鍵字，啟動(dòng)項(xiàng)目時(shí)瀏覽器直接請(qǐng)求路由對(duì)應(yīng)的代碼文件奕塑，代理服務(wù)器針對(duì)單個(gè)文件進(jìn)行編譯并返回堂污。如果請(qǐng)求的文件里還import了其他文件，同理瀏覽器繼續(xù)發(fā)請(qǐng)求龄砰，代理服務(wù)器返回盟猖。就這樣實(shí)現(xiàn)了npm run dev時(shí)無(wú)需編譯讨衣，實(shí)時(shí)請(qǐng)求實(shí)時(shí)編譯。
支持TS語(yǔ)法
Vue2結(jié)合ts的具體實(shí)踐中式镐，要用 vue-class-component 強(qiáng)化 vue 組件反镇，讓 Script 支持 TypeScript 裝飾器，用 vue-property-decorator 來(lái)增加更多結(jié)合 Vue 特性的裝飾器娘汞，最終搞的ts的組件寫(xiě)法和js的組件寫(xiě)法差別挺大歹茶。
Vue3量身打造了defineComponent函數(shù)，使組件在ts下价说，更好的利用參數(shù)類型推斷 辆亏。Composition API 代碼風(fēng)格中，比較有代表性的api就是 ref 和 reactive鳖目，也很好的支持了類型聲明扮叨。
