• 技术文章 >web前端 >Vue.js

    vue3为什么快?vue3的效率提升主要在哪方面?

    青灯夜游青灯夜游2022-04-26 10:54:11转载894
    vue3为什么快?vue3的效率提升主要在哪方面?下面本篇文章就来给大家介绍一下vue3相对于vue2 做了那些优化,希望对大家有所帮助!

    尤大大在介绍vue3说客户端的渲染效率比vue2提升了1.3-2倍, SSR渲染效率比 vue2 提升了2-3倍。

    对静态节点的提升

    什么是静态节点?

    所谓的静态节点就是在 vue 中的写在 template 模板中的 标签 并且该标签没有使用 v-bind 绑定属性, 在 vue3 就认为是 静态节点。(学习视频分享:vuejs教程

    <template >
      <img src="/_assets/logo.102c1acc.jpg" alt="logo"> // 静态节点 没有绑定任何属性
      <h1>Hello World</h1> // 静态节点 没有绑定任何属性
      <h1>{{ text }}</h1>
    </template>
    <script>
    export default {
      data() {
        return {
          text: 'Hello World',
        }
      },
    }
    </script>

    vue3 就会在 render 函数中将 静态节点 用变量保存下来, 所以该静态节点只会创建一次。

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

    为了证明这一点, 本地创建一个 vue3 的项目, 看网络请求

    1.png

    静态属性也会被提升

    <template >
      <div class="container"> //container 这是一个静态属性
        {{ text }} // 内容是动态的
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          text: 'Hello World',
        }
      },
    }
    </script>

    container 也会使用变量保存

    2.png

    预字符串化

    在实际的开发中, template 中实际很大一部分都是静态节点

    <template >
      <div class="container">
        <div class="logo">
          <h1>logo</h1>
        </div>
        <ul class="nav">
          <li><a href="">菜单</a></li>
          <li><a href="">菜单</a></li>
          <li><a href="">菜单</a></li>
          <li><a href="">菜单</a></li>
        </ul>
    
        <div class="user">
          {{ user.name }}
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          user: {
            name: '张三'
          }
        }
      },
    }
    </script>

    vue3 的编译器遇到大量的连续的静态节点, 会直接将其编译为一个普通的字符创节点

    .logo .nav 整个 div 都是静态节点, 如果按照 vue2 的处理方式会进行 递归创建处理

    而在 vue3 直接转化为一个字符串, 然后在创建真实 dom 是赋值给 innerHTML 属性, 就减少了 vue2 中的递归创建时间

    3.png

    预字符串化的性能提升不紧紧在第一次创建时的提升, 当在 render 函数重新渲染时的提升减少了大量的虚拟节点的对比时间(非常恐怖)

    缓存事件处理函数

    <template >
      <button @click="handleClick">点一下</button>
    </template>
    <script>
    export default {
      data() {
        return {
    
        }
      },
      methods: {
        handleClick() {
          console.log('点击了')
        }
      },
    }
    </script>

    handleClick事件,对比一下 vue2vue3 的处理方式

    // vue2
    render(ctx){
        return createVNode("button",{
            onclick: function ($event) {
                console.log('点击了')
            }
        })
    }
    
    // vue3
    export function render(_ctx, _cache, $props, $setup, $data, $options) {
        return (_openBlock(),
        _createBlock("button", {
            onClick: _cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args)))
        }, "点一下"))
    }

    _cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args))) 这段代码就是对事件函数的缓存

    Block Tree

    vue3 在对虚拟节点树对比时也做了优化

    vue2 在对比新旧节点树时, 并不知道那些节点是静态的, 那些节点是动态的, 因此只能一层一层的比较,这就导致浪费了大量的时间在静态节点对比上

    vue3 是如何进行对比的, 其实在当在创建节点时有有一个标记记录了该节点的类型

    4.png

    这里的 -1 其实就是标记该节点的类型, 所以当在 Block Tree 时, 根据该标记就能直接跳过对静态节点的对比, 从而达到减少对比的时间。

    PatchFlag

    PatchFlag 是对 Block Tree 进一步优化, 在对比单个节点的时, 会对比属性, 内容等等。

    vue2 在单个节点对比时不知道那些是要对比的所以全部对比一次

    vue3 就知道那些属性是动态的, 每次更新只对比动态的属性

    <template >
      <div class="logo">
        <h1>{{ text }}</h1>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          text: 'Hello World',
        }
      },
    }
    </script>

    l.logo中只有 h1 的内容是动态的所以在创建标虚拟节点时就是做标记

    5.png

    这里的1就是标记该内容是动态的, 所以在进行对比时就只对比 内容 是否变化, 就极大的缩短了对比时间(恐怖如斯)

    总结

    上面的优化都依托于 vue3强大的编译器 恐怖如斯

    (学习视频分享:web前端开发编程入门

    以上就是vue3为什么快?vue3的效率提升主要在哪方面?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue
    上一篇:vue3+vite2+ts4搭建项目环境规范 下一篇:vue中有缓存机制吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 记录一个使用Vue 3开发Fimga插件的过程• Vue3计算属性是如何实现的?聊聊实现原理• 了解vue中的单项数据流和双向数据绑定,两种冲突吗?• 手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用• 总结分享Vue中实现组件间通讯的多种方式,再也不怕面试了!• vue中如何优雅的封装第三方组件?封装方法介绍
    1/1

    PHP中文网