觀看Vue3全球發佈會的總結筆記,翻譯水平有限你們海涵。 最後有學習資料彙總。html
先來一波我楊哥的視頻普及一下 Vue3知識

Vue3光速入門系列視頻 視頻地址:www.bilibili.com/video/BV1Wh… 目錄vue
www.bilibili.com/video/BV1Wh…vuex
www.bilibili.com/video/BV1Wh…api
www.bilibili.com/video/BV1Wh…安全
www.bilibili.com/video/BV1Wh…服務器
www.bilibili.com/video/BV1Wh…markdown
www.bilibili.com/video/BV1Wh…框架
www.bilibili.com/video/BV1Wh…dom
www.bilibili.com/video/BV1Wh…異步
www.bilibili.com/video/BV1Wh…
www.bilibili.com/video/BV1Wh…
www.bilibili.com/video/BV1Wh…
www.bilibili.com/video/BV1Wh…
- P13 13-transition類名變化,watch再也不支持點分割路徑
www.bilibili.com/video/BV1Wh…
- P14 14-event api、filter等移除API一覽
www.bilibili.com/video/BV1Wh…
www.bilibili.com/video/BV1Wh…
www.bilibili.com/video/BV1Wh…
後續更新計劃 • router-next • vuex-next • ts + vue3 • vite • 企業級項目
1、回顧Vue3創做歷史

Phase 1:Prototype原型
- 2018/02/26 - The very fist idea about Vue3
- 2018/09/12 - First working prototype
- 考慮如何組織代碼
- 嘗試使用Typescript
- 嘗試使用monorepo
- 嘗試其餘新的新的東西
里程碑: mini版vdom運行時環境 + 獨立的基於Proxy的響應式API
- 2018/09/19 - Graduated prototype into current
vue-next
repo
- 將畢業班原型提交Git倉庫
- 2018/09.21 - First Vue 3 announcement at Vue.js London 宣佈開發Vue3
Phase 2:Exploration探索

- 2018末~2019初 嘗試各類新東西是否好用
- Classify API - 類風格API
- TypeScript 類型推斷是否好用
- Reactive Hooks
- Time Slicing
- 2019/01/04 Established the RFC process
- 2019/02/27 Class API RFC 推出類風格的API RFC版本
- 2019/03~2019/05 Researching new rendering strategy
研發新的渲染策略
Phase 3:Pivot 核心任務

- 2019/05/21 Class API dropped 放棄Class風格API
- 2019 05 ~ 06 Re-writing core rendering logic 從新編寫渲染邏輯
- patch flag
- block tree optimizations
- 2019/06/07 Function API RFC
- 2019/06~08 Composition API design/ feedback
- 2019/08/16 Composition API RFC
Phase 4:Feature Parity - 特性抹平
兼容Vue2.0大部分API

-
2019/09 2.x Options API support 支持Vue2.0 定義風格API New compiler implementation 實現新編譯器
-
2019/10 v-model
-
2019/11 Transition system 動畫過渡系統
-
2019/12 Toolling
-
2020/01/02 3.00-alpha.1
-
2020 01 ~ 04 Server-side rendering 服務器渲染
Phase 5: Stability & Ecosystem 提升穩定性與生態建設

2020/04/16 3.0.0-beta.1 2020-05 ~ 06 Dogfooding via Vite 內測Vite - VitePress VitePress項目 - Teams working on v3 support in sub projects 支援v3子項目 2020/06/17 3.0.0-rc1

2、Vue3新特性

Modularized Internals 模塊化內核

Vue再也不是一個大的黑盒,
- 獨立的響應式
- 抽象渲染器與渲染目標無關 - (Dom、Canvas、終端顯示)支持自定義渲染器。
- 可擴展是編譯器 能夠經過實現編譯器插件來擴展編譯器。
解鎖高級功能

- 編譯時i18n國際化
- 自定義渲染器 例如: 原生App、WebGL、終端顯示
- 獨立的響應式實現包 - 與外部模板系統一塊兒組成新的應用
TypeScript支持

- 源碼開發 - Internal
- 更好的編輯器支持 - 重構代碼更加的方便而安全
- 提升代碼貢獻者提交信心
- 業務編寫 - External
- 知足日益增加的TS Vue使用者需求
- 自動類型推斷 - 一致性檢查 下降維護成本
Composition API 複合API

- 助推複雜業務邏輯用例
- 天然完善的TS支持
- 爲封裝解耦組織業務邏輯而生
- 替代mixins混入方案
講的這麼浪 簡直就是廣告詞 😝
Compiler-informed VirtualDom 編譯推斷型虛擬Dom - 靜態提高

經過編譯推斷型虛擬Dom實現靜態提高是Vue3.0的很是顯著的性能提高的地方。 在編譯期間咱們很容易判斷視圖模板中哪一部分是動態部分,哪一部分是靜態部分。然是若是使用純JS的渲染函數或者JSX語法作到這一步就很難。因此Vue3很大膽的創造性的在編譯器進行分析和優化,只保留必要的動態部分的渲染功能,減小了運行時的運算量。

Compiler-informed SSR 編譯推斷式服務器段渲染

- 靜態提高內容提早轉化爲純字符串
- 因爲客戶端注水激活(hydration)時只激活動態節點,性能提高顯著。
Tree-shaking-aware global API 全局API可按需剪裁

有圖有真相,總之編譯體積變小。
新的單文件組件特性

<script setup>
針對複合API的語法糖
直接導出綁定值(行爲函數、對象、響應式對象)


Suspense懸念功能 - 異步依賴

3、正式版推出

- 3.0推出穩定版可是版本編號還暫時保留爲@next - 給社區更多的應對時間
- 個子項目目前還在beta、RC 會很快發佈

4、參考文檔 Trying Vue 3 Today
v3.vuejs.org 官方文檔
v3.cn.vuejs.org 官方中文文檔
Migration Guide 遷移指南
遷移文檔 官方中文文檔
楊村長的Vue3.0 遷移私房菜
一篇搞懂Vue3.0
漸進式手敲Vue3.0框架
