vue3的效率提升主要表现在哪些方面？

骑猪看日落 2023-09-27 14:29 133阅读 0赞

> 客户端渲染效率比vue2提升了1.3~2倍
> 
> SSR渲染效率比vue2提升了2~3倍

## 静态提升 ##

解释：
    1. 对于静态节点（如：<h1>接着奏乐接着舞</h1>），vue3直接提出来了，避免render函数多次渲染
    2. 静态属性也会被提升

下面的静态节点会被提升

*  元素节点
 *  没有绑定动态内容

// vue2 的静态节点
    render(){
        
      createVNode("h1", null, "Hello World")
      // ...
    }
    
    // vue3 的静态节点
    const hoisted = createVNode("h1", null, "Hello World")
    function render(){
        
      // 直接使用 hoisted 即可
    }

静态属性会被提升

const hoisted = {
         class: "user" }
    
    function render(){
        
      createVNode("div", hoisted, user.name)
      // ...
    }

## 预字符串化 ##

这里是最牛的地方。vue3对于超过20个连续的静态元素，他将这些节点变成字符串节点，在SSR里面效率提升尤为明显。

当编译器遇到大量连续的静态内容，会直接将其编译为一个普通字符串节点

const _hoisted_2 = _createStaticVNode("<div class=\"logo\"><h1>logo</h1></div><ul class=\"nav\"><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li></ul>")

![7f3dd4746503473191f44cbf15a86ef8.png][]

![9446f8c04d2445d5b5ad8a35a51704ff.png][]

## 缓存事件处理函数 ##

这里的效率提升很简单，就是加了缓存，具体请看下面的代码示例

// vue2
    render(ctx){
        
      return createVNode("button", {
        
        onClick: function($event){
        
          ctx.count++;
        }
      })
    }
    
    // vue3
    render(ctx, _cache){
        
      return createVNode("button", {
        
        onClick: cache[0] || (cache[0] = ($event) => (ctx.count++))
      })
    }

## Block Tree ##

这里也很重要，这是对于具体的节点（如某个对象）的对比，依托vue3强大的编译器，会标记动态节点，并将动态节点加入到数组中，然后遍历数组进行对比。

vue2在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在比对静态节点上

![ea977ff26f2b4fe88bfb5be748f980f8.png][]

![6829c308266541cf95a82085235a0b84.png][]

## PatchFlag ##

vue2在对比每一个节点时，并不知道这个节点哪些相关信息会发生变化，因此只能将所有信息依次比对

![736437faaedb4d2a9968d397f33f1a2e.png][]

[7f3dd4746503473191f44cbf15a86ef8.png]: https://img-blog.csdnimg.cn/7f3dd4746503473191f44cbf15a86ef8.png
[9446f8c04d2445d5b5ad8a35a51704ff.png]: https://img-blog.csdnimg.cn/9446f8c04d2445d5b5ad8a35a51704ff.png
[ea977ff26f2b4fe88bfb5be748f980f8.png]: https://img-blog.csdnimg.cn/ea977ff26f2b4fe88bfb5be748f980f8.png
[6829c308266541cf95a82085235a0b84.png]: https://img-blog.csdnimg.cn/6829c308266541cf95a82085235a0b84.png
[736437faaedb4d2a9968d397f33f1a2e.png]: https://img-blog.csdnimg.cn/736437faaedb4d2a9968d397f33f1a2e.png