《前端会客厅》对话winter和尤雨溪，深度探寻Vue3设计思想(上)

时间 2020-07-06 标签前端会客厅对话 winter 尤雨溪深度探寻 vue3 vue 3 设计思想

前端会客厅是我和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

复制代码