編輯 | 開三金

1

Toc：

體驗vue3的三種姿勢Composition ApiFragment Teleport suspense尺寸內部架構響應式系統獨立自定義渲染器api

體驗vue3的三種姿勢：

vue-cli官方的webpack-previewvite

詳細步驟：

# vue-clinpm install -g @vue/clivue create 01-vue3-clicd 01-vue3-clivue add vue-nextnpm run serve# webpackgit clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpackcd 01-vue3-webpacknpm install npm run dev# vitenpm install -g create-vite-appcreate-vite-app 01-vue3-vitecd 01-vue3-vitenpm installnpm run dev

Vite：

大致的原理就是攔截import發出的http請求，返回瀏覽器的程式碼，也保留了import語法，讓瀏覽器自己去處理依賴 script type module 支援import；

讓瀏覽器處理es6 import的活，好處就是當前頁面引用多少，編譯多少，專案越大優勢越大。

編譯還是用了rollup；

不過生產環境其實也儘可能的利用es6的import，當你做懶載入分包的時候 ，如果瀏覽器不支援，動態的import是被polyfill的。

熱載入 基本都是100ms以內 相比於大專案webpack2S左右的體驗，差距是很大的。

尤大願意往vite這類工具上投入精力，是個非常好的事情，大家苦webpack久矣。

vite還給我一個啟發，就是尤大起名的藝術，vue和vite都是法語。

有逼格，以後我搞開源 Vue3如此牛皮，我決定我下一個開源專案就叫cur.js。

2

效能：

vue2初始化 所有的資料都要走defineProperty ；

vue3用proxy 動態的決定返回什麼 做了攔截，初始工作量減少 元件例項化的提升還是明顯，首次mount 一會程式碼看看。

https://www.yuque.com/woniuppp/vue3/perf

vdom重寫：

動態靜態模板 vue2一竿子到底 全部diff vue3在模板層做靜態分析。生成聰明的渲染函式。

靜態提升，節點結構根據v-if和v-for切分出block，block內部節點結構是不變的，我們直接把動態節點維護在一個數組裡即可。

一個大模板 可能嵌套了十層，但是沒有v-if或者v-for的話，整個模板只需要記錄一個數組，包含動態節點，就是這樣。

vue2也有static標記優化，但是做的不極致，vue3設計了block的概念，update只和動態內容強相關，和靜態內容解耦了，大部分專案靜態節點比你想象的多，比如一些為了佈局存在的div等， 這個以後會專門發個文章講解。

測試元件：

官方說update是1.3~2倍， 測試的結果要更好一些，看來尤大比較保守。

<template> <div> <h1>Vue2 {{ items.length }} Components</h1> <p>{{ action }} took {{time}}ms.</p> <button @click="shuffle">shuffle</button> <ul class="col-row" v-for="item in items" :key="item.id"> <li class="col-md-1" >kkb</li> <li class="col-md-1" >kkb</li> <li class="col-md-1" >kkb</li> <li class="col-md-1" >{{item.label}}</li> </ul> </div></template><script>import {shuffle} from 'lodash'var total = 500var items = []for (var i = 0; i < total; i++) { items.push({ id: i, label: String(Math.random()).slice(0, 5) })}let s = window.performance.now()export default{ data(){ return { total: total, time: 0, action: 'Render', items: items, selected: null, actions:['刪除','更新'] } }, mounted(){ this.time = window.performance.now() - s }, methods: { shuffle(){ this.action = 'shuffle' this.items = shuffle(this.items) let s = window.performance.now() this.$nextTick(()=>{ this.time = window.performance.now() - s }) } }}</script>

SSR：

SSR相比於vue2有2~3倍的差距，會客廳當時說到這一點，尤大對ssr的新實現，還是非常得意的 vue3能靜態字串化的。

全部靜態字串，只有一個buffer，vue2之前就算是字串， 內部還是有虛擬節點的處理邏輯。

用wrk壓測qps，詳細程式碼文章vue2和vue3的ssr 直接上結論 130 VS 288 ，也是2.x倍的差距；

這個差距在元件複雜之後，變得越來越明顯 ，大家可以考慮自己試一下500個component的壓測：

// vue2 12個程序，300個併發，壓10秒➜ ~ wrk -t12 -c400 -d10s http://localhost:9092/Running 10s test @ http://localhost:9092/ 12 threads and 400 connections^[[A Thread Stats Avg Stdev Max +/- Stdev Latency 1.48s 442.21ms 1.80s 89.88% Req/Sec 24.62 20.56 88.00 59.73% 1319 requests in 10.10s, 173.65MB read Socket errors: connect 157, read 183, write 0, timeout 74Requests/sec: 130.58Transfer/sec: 17.19MB// vue3 12個程序，300個併發，壓10秒➜ ~ wrk -t12 -c400 -d10s http://localhost:9093/Running 10s test @ http://localhost:9093/ 12 threads and 400 connections Thread Stats Avg Stdev Max +/- Stdev Latency 770.76ms 165.36ms 1.89s 89.11% Req/Sec 63.99 56.81 252.00 74.34% 2912 requests in 10.10s, 411.12MB read Socket errors: connect 157, read 31, write 0, timeout 0Requests/sec: 288.21Transfer/sec: 40.69MB3

更新效能：

靜態動態三比一， 首屏渲染對比，update效能對比

包含了dom操作，如果去掉dom操作，效能對比更明顯 可能要3倍以上

日常業務場景，靜態元件會比你意識到的還要多一些，比如一些一些css佈局使用的div

值得期待

詳細程式碼：

內部架構：

分層清晰，monorepo

編譯層+執行時優化

自定義編輯器Api：

由於mpvue這個框架的釋出，想修改vue2的compiler和runtime，必須要完整的fork一個vue，再改，小右17年的微博，還說過以後要把這些全部拆開，20年的vue3實現了。

這個也需要寫點文章來說，先放圖和程式碼

下集預告：

compostion api實戰fragment 元件遞迴響應式騷操作custom renderer自定義渲染器實戰使用者答疑+八卦reactivity和vuex的關係class based api被幹掉的心路歷程vue3設計的過程小右如何學習的

越學習就越覺得vue3是一個面向未來的框架，決定下半年好好推廣vue3，最近在寫vue3全家桶的電子書，推薦一下~

https://www.yuque.com/woniuppp/vue3