程序猿的庚子年，到底有多难？

傷城~ 2023-02-28 11:13 19阅读 0赞

虽然不知道“庚子年必有大乱”这事可不可信，但今年不论是公司还是个人，大家都不容易。我身边也一直能听到坏消息，很多以前的同事、认识的朋友，工作上都不顺利。有不发奖金的，有快被优化的，最惨的是有年后就闲在家里，始终没等来机会的。

就在前两天，一位久未联系的朋友找我吃饭，一开口就聊起了他被辞退的事。以往他能凭借经验、人脉和能说会道在岗位上牢牢扎根，但今年公司本身也在挣扎求活，他对新技术的不敏感就立刻成为了公司发展显而易见的短板，被换掉实在是理所当然。

现在技术发展的太过迅速，别说一年不学习，只要一个月没有接触新知识，就已经在落后。而前端今年最要关注的就是Vue3.0的发布，现在Vue3已经推出了BETA版，8月就要推出正式版。

**恰好我看到了《web前端会客厅》节目，由winter、大圣越洋连线了****“Vue之父”尤雨溪****，深度分享Vue3.0的开发思路，****节目中会现场秀代码****，展示Vue3.0的全新开发体验。**

机会难得，特意分享给大家，扫码即可领取，千万不要错过。

**连线尤雨溪 第1集节选**

▶** 扫码领取1+2集完整内容** ◀

![format_png][]

![format_png 1][]

**Toc：**

*  体验vue3的三种姿势
 *  Composition Api
 *  Fragment Teleport suspense
 *  尺寸
 *  内部架构
 *  响应式系统独立
 *  自定义渲染器api

**体验vue3的三种姿势：**

1.  vue-cli
2.  官方的webpack-preview
3.  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：**

大致的原理就是拦截import发出的http请求，返回浏览器的代码，也保留了import语法，让浏览器自己去处理依赖 script type module 支持import；

让浏览器处理es6 import的活，好处就是当前页面引用多少，编译多少，项目越大优势越大。

![format_png 2][]

![format_png 3][]

编译还是用了rollup；

不过生产环境其实也尽可能的利用es6的import，当你做懒加载分包的时候 ，如果浏览器不支持，动态的import是被polyfill的。

热加载 基本都是100ms以内  相比于大项目webpack2S左右的体验，差距是很大的。

尤大愿意往vite这类工具上投入精力，是个非常好的事情，大家苦webpack久矣。

vite还给我一个启发，就是尤大起名的艺术，vue和vite都是法语。

有逼格，以后我搞开源 Vue3如此牛皮，我决定我下一个开源项目就叫cur.js。

![format_png 4][]

![format_png 5][]

![format_png 6][]

**性能：**

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等， 这个以后会专门发个文章讲解。

**测试组件：**

![format_png 7][]

官方说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：**

![format_png 7][]

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

![format_png 8][]

**更新性能：**

静态动态三比一， 首屏渲染对比，update性能对比

包含了dom操作，如果去掉dom操作，性能对比更明显 可能要3倍以上

日常业务场景，静态组件会比你意识到的还要多一些，比如一些一些css布局使用的div

值得期待

**详细代码：**

![format_png 9][]

![format_png 10][]

**内部架构：**

分层清晰，monorepo

编译层+运行时优化

**自定义编辑器Api：**

由于mpvue这个框架的发布，想修改vue2的compiler和runtime，必须要完整的fork一个vue，再改，小右17年的微博，还说过以后要把这些全部拆开，20年的vue3实现了。

这个也需要写点文章来说，先放图和代码

![format_png 11][]

![format_png 12][]

**下集预告：**

1.  compostion api实战
2.  fragment 组件递归
3.  响应式骚操作
4.  custom renderer自定义渲染器实战
5.  用户答疑+八卦

*  reactivity和vuex的关系
 *  class based api被干掉的心路历程
 *  vue3设计的过程
 *  小右如何学习的

越学习就越觉得vue3是一个面向未来的框架，决定下半年好好推广vue3，最近在写vue3全家桶的电子书，推荐一下~

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

第3集的前端会客厅即将到来，欢迎扫码了解详情，后续内容及时看。

▶ **扫码观看1+2集完整内容 **◀

![format_png][]

[format_png]: /images/20230209/b3d19497a23e4fa389e461b3d36d5b78.png
[format_png 1]: /images/20230209/635754743a5d4fb98dad9e57017a84bb.png
[format_png 2]: /images/20230209/42b94e66f2f644b0b48aa9158c1834da.png
[format_png 3]: /images/20230209/debbcfd37f9b443eb5f5340ddabc20ef.png
[format_png 4]: /images/20230209/adf8178ae5fb4060ace40ea7ec64488c.png
[format_png 5]: /images/20230209/a29caa57fad245818e7a12fb735684cc.png
[format_png 6]: /images/20230209/3ef3d8bae2064e53ae2edd95be43cab3.png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9oT2J6MGplbnhpY0RVaWJtZEZVQ3B3elNLakUyM2dta3VOT3ZNSEZaQ2JyUkppYnFtaWFqSDlkZzQ4eHBOMU9QUU44bnFqaEt3TnlCZk83ZTdIa0EyYjR4SEEvNjQw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oT2J6MGplbnhpY0RVaWJtZEZVQ3B3elNLakUyM2dta3VOSmliWm16Sk9OQXJXN2J3aDR3cks2YVRRSDg1RVh3a3NpY1JCT0RsVVJPZW9IY2FpYUJOdzV6eTRRLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oT2J6MGplbnhpY0RVaWJtZEZVQ3B3elNLakUyM2dta3VOSFVpYnRJbFkwMGpaWHFreGpJSVVHalpZNGJlNHlpYVhwZk1PSXRWdUxZeUtiRHlBNXZLdkp4cFEvNjQw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oT2J6MGplbnhpY0RVaWJtZEZVQ3B3elNLakUyM2dta3VOam9wdW05cndNUWphU1dRY3AxNGNsRWljT3pGYUUxaWNrQTk1aWNuSGlhM25kRzRHRWpHd0dzcEJHUS82NDA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oT2J6MGplbnhpY0RVaWJtZEZVQ3B3elNLakUyM2dta3VOdVpxV1FSNzdoQTFFeFpXSjJqV3pURGlhcXdhZ21wbzhONGtnWm5SNm5WZUtTWGhVUlo5ZHh0QS82NDA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oT2J6MGplbnhpY0RVaWJtZEZVQ3B3elNLakUyM2dta3VOaWEyUnJpYjVQQWY0aWNjZDRpYnkzMTVGVXFjQzNHZWdjdmdwRVNvRzY5dkE4cE1XNWoxV0JuOTZDUS82NDA?x-oss-process=image/format,png