1.vue3簡介
1.1 課程簡介
Compiler原理介紹，瞭解Vue3帶來的性能提升，開發架構上的變化和打包編譯原理。在課程實戰環節中，介紹了最新的API用法、遺棄的API和升級指南。Vite作爲Vue3開發環境，可以實現動態加載，冷啓動 + 編譯，方便開發的同時，使用rollup大幅降低了配置流程，結合Vue3的composition API，更加方便了開發。介紹了這麼多，快來試試吧！
1.2 vue3的優勢：
1.3 vue3.0帶來的變化：
- 按需加載，VDom/reactive 算法，e.g. v-model/Transition
- 組合API
- TS 支持，新增 Fragment、Teleport、Suspense
- 性能提升 1.3~2.X
1.4 vue-next-template-explorer 嚐鮮：
示例：
可以看到模板中有四個div，也就是四個根節點，在vue2中，一個模板裏面只能有一個根節點。編譯器使用 createVNode 創建了虛擬節點，並啓用 hoistStatic 能力將靜態節點和動態節點區分，對靜態內容，不再做更新處理。
上面這個示例，不啓用 cacheHandlers 之前是將事件綁定在當前上下文，啓用了 cacheHandlers 的能力，會將事件進行全局註冊。在定義組件的場景下，啓用 cacheHandlers 就不會對重複創建的組件上的事件多次實例化。
ssr 模式下，抽離了靜態節點，轉化爲string字符串。
根據上面幾個實例，可以看到 compiler 優化的幾點：
- 靜態節點不在做更新處理（hoistStatic -> SSR）
- 靜態綁定的class id等屬性不做更新處理
- 結合打包hint，進行更新分析（動態綁定）
- 事件監聽器 Cache 緩存處理（cacheHandlers）
- hoistStatic自動針對多靜態節點進行優化，輸出字符串
- 按需加載，當模板爲空時，輸出爲null
總結起來就是：
- virtual dom機制調整
- 內存優化
- 按需加載，更靈活的組件化
2.vue3的使用
setup 的 this 是個 void。