Vue js 3.0的优化

ping Network

已于 2022-07-22 08:47:03 修改

阅读量448

点赞数 2

文章标签： vue.js javascript 前端

于 2022-07-21 10:43:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41268872/article/details/125885615

版权

Vue3.0针对Vue2.x进行了多项优化，包括源码管理使用monorepo和typescript提高可维护性，性能上通过ProxyAPI优化数据劫持，减少了不必要的递归，提升了响应式效率。此外，Vue3.0引入了CompositionAPI，改善了逻辑组织和复用，使得代码结构更清晰，类型支持更完善。同时，编译优化如Blocktree的使用，提升了更新性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的发展历程

vue1.x到vue2.x主要增加了虚拟dom的概念;

vue2.x存在的痛点:数据量大后带来的渲染和更新的性能问题;想舍弃但为了兼容一直保留的鸡肋API;

vue3.x的优化:

源码优化:

首先是源码优化,也就是小右对于Vue.js框架本身开发的优化,更易于开发和维护;主要体现在使用monorepo和typescript管理和开发源码,提升自身代码可维护性;相对于Vue.js2.x的源码组织方式,monorepo把这些模块拆分到不同的package中,每一个package有各自的API,类型定义和测试;这样是的模块拆分更细化,职责划分更明确,模块之间的依赖关系也更明确;开发者也更容易阅读,理解和更改所有模块源码,提高代码的可维护性。package(比如reactivity响应式库)是可以独立于Vue.js使用的，这样用户如果只想使用Vue.js3.0的响应式能力，可单独依赖这个响应式库而不用依赖整个Vue.js减小了引用包的大小，而Vue2.x是做不到的。vue1.x是没有类型，类型能在编码阶段避免类型错误，配合IDE实现类型推导。为了适应大型应用的开发，Vue的作者在Vue2.x中引入了Flow,但在Vue3.x中又推翻了Flow，采用typescript重构。Flow是Facebook出品的Javascript静态类型检查工具，它可以以非常小的成本对已有的JavaScript代码迁入，非常灵活，这也是Vue2.x当初选型它时的一方面考量。Flow对一些复杂场景类型的检查支持的并不好，记得在看Vue2.x源码的时候，在某行代码注释中看到了对Flow的吐槽。

性能优化：

Vue.js3.0在源码体积的减少方面做了哪些工作呢？

移除一些冷门的feature。
引入tree-shaking的技术，依赖ES2015模块语法的静态结构（即import和export）,通过编译阶段的静态分析，找到没有引入的模块并打上标记。

数据劫持优化

在Vue中想要实现DOM的功能，必须劫持数据的访问和更新，当数据改变后，为了更新DOM，那么就必须劫持数据的更新，也就是说当数据发生改变后能自动执行一些代码去更新DOM。

Vue.js怎么知道更新哪一片DOM呢？

因为在渲染DOM的时候访问了数据，我们可以对它进行访问劫持，这样就在内部建立了依赖关系，也就知道数据对应的DOM是什么了

通过Object.defineProperty这个API劫持数据的getter和setter,具体是这样的：

Object.defineProperty(数据data, 属性key, {
    get() {
        // track
    },
    set() {
        // trigger
    }
})

Object.defineProperty这个API存在一些缺陷：劫持数据时，需要知道劫持对象的key,不能检测到数据的添加和删除，为此Vue2.x提供来了$set,$delete以及重写数组的七个方法。当劫持的对象嵌套层级比较深时，Object.defineProperty需要递归劫持，因为不知道使用者要用到哪一个属性，对性能来说是一大浪费。

为了解决Object.defineProperty的问题，Vue3.x使用了Proxy API对数据进行劫持：

observed = new Proxy(数据data, {
    get() {
        // track
    },
    set() {
        // trigger
    }  
})

因为Proxy是对整个对象进行劫持，所以能轻松检测到对象的增删。值得注意的是，Proxy API 并不能监听到内部深层次的对象变化，因此Vue3.0的处理方法是在getter中去递归响应式。这样的好处是真正访问内部对象才会变成响应式，而不是无脑递归实现响应式，无疑也在很大程度上提升了性能。

编译优化

编译过程：

除了在数据劫持部分优化，还可以在耗时较多的patch阶段想办法

当一个模块中只有少量的动态数据时，Vue2.x还是会对模块的整个节点进行遍历更新，理想情况下，diff只需对绑定数据的标签进行更新即可。Vue3.x通过编译阶段对静态模板的分析，编译生成Block tree。

Block tree

Block tree是一个将模块基于动态节点指令切割的嵌套区块，每一个区内部的节点结构是固定的，只需要以一个Array来追踪自身包含的动态节点。

借助Block tree，Vue将vnode更新性能由与模板整体大小相关提升为与动态内容的数量相关。

除了Block tree,编译阶段还包含了对Slot的编译优化，事件侦听函数的缓存优化并且在运行时重写diff算法。

语法API优化：Composition API

除了源码和性能方面，Vue3.x还在语法方面进行了优化，主要是提供了Composition API。Vue1.x和Vue2.x编写组件本质是在编写一个"包含了描述组件选项的对象"，我们把它称为Options API。

优化逻辑组织

Options API

Options API的设计是按照methods,computed，data，props这些不同的选项分类。
当组件小的时候，这种分类一目了然；但是在大型组件中，一个组件可能有多个不同的逻辑关注点。当使用Options API的时候，每一个关注点都有自己的Options,如果需要修改一个关注点，就需要在单个文件中不断上下切换和寻找。