《前端會客廳》對話winter和尤雨溪，深度探尋Vue3設計思想(上)

時間 2020-07-06

標籤前端會客廳對話 winter 深度探尋 vue3 vue 設計思想简体版

原文原文鏈接

前端會客廳第一期B站地址javascript

前端會客廳是我和winter設計的一檔技術節目，每期會邀請一個嘉賓，暢聊前端技術css

上次B站尤大的直播講解了不少Vue3新的設計，有幸前端會客廳第一期邀請到了尤大從另一個角度聊聊vue3, 針對Vue3的新特性，我也準備了一些代碼演示至關於一個買家秀, 代碼實操我最近會錄製視頻放B站，歡迎關注html

體驗vue3的三種姿式

vue-cli
官方的webpack-preview
vite

詳細步驟前端

# vue-cli
npm install -g @vue/cli
vue create 01-vue3-cli
cd 01-vue3-cli
vue add vue-next
npm run serve

# webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd 01-vue3-webpack
npm install 
npm run dev

# vite

npm install -g create-vite-app
create-vite-app 01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev

複製代碼

Vite

面向現代瀏覽器的開發工具告別開發環境冗長的等待手寫vite理解原理vue

大體的原理就是攔截import發出的http請求，返回瀏覽器的代碼，也保留了import語法，讓瀏覽器本身去處理依賴 script type module 支持import，讓瀏覽器處理es6 import的活，好處就是當前頁面引用多少，編譯多少，項目越大優點越大java

編譯仍是用了rollup，不過生產環境其實也儘量的利用es6的import，當你作懶加載分包的時候，若是瀏覽器不支持，動態的import是被polyfill的

熱加載基本都是100ms之內相比於大項目webpack2S左右的體驗，差距是很大的react

尤大願意往vite這類工具上投入精力，是個很是好的事情，你們苦webpack久矣webpack

vie還給我一個啓發，就是尤大起名的藝術，vue和vite都是法語有逼格，之後我搞開源 Vue3如此牛皮，我決定我下一個開源項目就叫cuir.js git

性能

vue2初始化全部的數據都要走defineProperty ，vue3用proxy 動態的決定返回什麼作了攔截，初始工做量減小組件實例化的提高仍是明顯，首次mount 一會代碼看看

vue2和vue3的update對比代碼es6

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 = 500 var 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 74
Requests/sec:    130.58
Transfer/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 0
Requests/sec:    288.21
Transfer/sec:     40.69MB

複製代碼