Vue3 性能提升 ｜小册免费学

前言：

Vue3 发布已经有一段时间了，相信不少人也开始用起来了，但是我为什么一定要学 Vue3 呢？

• 性能比vue2.x快1.2～2倍
• 按需编译，体积比vue2.x更小
• 组合API（类似React Hook）
• 更好的TS支持
• 暴露了自定义渲染API
• 支持Tree-shaking

Vue3 性能是如何提升的？

响应式系统提升

• Vue2.0中响应式系统的核心defineProperty
  在初始化时会遍历data中的所有成员，通过defineProperty将对象的属性转换为getter和setter，如果对象中的成员又是对象的话需要递归处理里面的每一个属性，因为是在初始化时进行的defineProperty，所以没有使用的属性也进行了响应化处理

• Vue3.0中使用Proxy对象重写响应式系统
  使用的Es6后新增的Proxy对象，本身性能就比defineProperty要好。另外代理对象可以拦截属性的访问、赋值、删除等操作，不需要初始化时遍历所有的属性。另外多层嵌套属性只有在访问时才会递归处理下一层属性

• • 可以监听动态新增的属性，vue2.0中需要调用vue.set()进行处理
  • 可以监听删除的属性，vue2.0监听不到属性的删除
  • 可以监听数组的索引和length属性，vue2.0监听不到这两个属性的操作

使用Proxy提升了响应式的性能和功能

虚拟 DOM 性能优化

vue2.x中的虚拟dom是进行全量的对比。而vue3.0新增了静态标记。在与上次虚拟节点进行对比的时候，只对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。

下面我们来举个例子，以下是代码片段。

<div>
  <p>标签</p>
  <p>{{msg}}</p>
</div>
复制代码
复制代码

vue2.x的diff算法是对虚拟dom树全量的对比。 vue3.0的diff算法在创建虚拟dom的时候，会根据dom中的内容是否发生变化，添加静态标记。只对比带有patch flag的节点。

Tree-shaking

说到 Tree-shaking 这个属于，官方的解释用大白话说就是，没有被应用到的代码，编译后自动将其剔除。

作者：chenuvi

邮箱： chenui@outlook.com

参考内容：

vue3 官网教程

Vue3.0系列——「vue3.0性能是如何变快的？」

Vue 3.0 企业级项目实战

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情