Vue3.0全球發佈會乾貨總結

觀看Vue3全球發佈會的總結筆記,翻譯水平有限你們海涵。 最後有學習資料彙總。html

先來一波我楊哥的視頻普及一下 Vue3知識

Vue3光速入門系列視頻 視頻地址:www.bilibili.com/video/BV1Wh… 目錄vue

  • P1 01-快速起始

www.bilibili.com/video/BV1Wh…vuex

  • P2 02-傳送門Teleport

www.bilibili.com/video/BV1Wh…api

  • P3 03-Fragments和Emits選項

www.bilibili.com/video/BV1Wh…安全

  • P4 04-自定義渲染器

www.bilibili.com/video/BV1Wh…服務器

  • P5 05-全局api改成實例方法

www.bilibili.com/video/BV1Wh…markdown

  • P6 06-API可作搖樹優化

www.bilibili.com/video/BV1Wh…框架

  • P7 07-v-model使用的變化

www.bilibili.com/video/BV1Wh…dom

  • P8 08-渲染函數API的變化

www.bilibili.com/video/BV1Wh…異步

  • P9 09-函數式組件使用變化

www.bilibili.com/video/BV1Wh…

  • P10 10-異步組件使用變化

www.bilibili.com/video/BV1Wh…

  • P11 11-data選項、自定義組件白名單

www.bilibili.com/video/BV1Wh…

  • P12 12-自定義指令API和組件保持一致

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…

  • P15 15-一個案例通關vue3核心特性

www.bilibili.com/video/BV1Wh…

  • P16 16-組件化實戰

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
    • 想象下一代Vue主版本應該是什麼樣子
  • 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

    • SFC 單文件組件
    • HMR 編譯器熱替換模塊
  • 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新特性

  • 加強可維護性

    • TypeScript + modularized internals 基於TS語言編寫和模塊化更強的核心代碼
  • 性能提高

    • Proxy-based Reactivity System 基於代理的響應式系統
    • Compiler-informed Virtual DOM & SSR 編譯推斷的虛擬Dom和服務器渲染
  • 更小體積

    • Tree-shaking 按需裁剪
    • Compile-time flags
  • Scales better 更好的可伸縮性

  • Better DX New Single-file Component improvements 新的單文件組件性能改進

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的語法糖

直接導出綁定值(行爲函數、對象、響應式對象)

  • <style vars> 樣式支持響應式對象做爲變量

  • 完美支持Typescript語法

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框架

相關文章
相關標籤/搜索