乐趣区

关于vue.js:一文看懂Vue30的优化

jiezi

1. 源码优化：

a. 应用 monorepo 来治理源码

  • Vue.js 2.x 的源码托管在 src 目录，而后根据性能拆分出了 compiler（模板编译的相干代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相干代码）、sfc（.vue 单文件解析相干代码）、shared（共享工具代码）等目录。
  • Vue.js 3.0，整个源码是通过 monorepo 的形式保护的，依据性能将不同的模块拆分到 packages 目录上面不同的子目录中，每个 package 有各自的 API、类型定义和测试。

b. 应用 Typescript 来开发源码

  • Vue.js 2.x 选用 Flow 做类型查看，来防止一些因类型问题导致的谬误，然而 Flow 对于一些简单场景类型的查看，反对得并不好。
  • Vue.js 3.0 摈弃了 Flow，应用 TypeScript 重构了整个我的项目。TypeScript 提供了更好的类型查看，能反对简单的类型推导；因为源码就应用 TypeScript 编写，也省去了独自保护 d.ts 文件的麻烦。

2. 性能优化：

a. 引入 tree-shaking 的技术

  • tree-shaking 依赖 ES2015 模块语法的动态构造（即 import 和 export），通过编译阶段的动态剖析，找到没有引入的模块并打上标记。像咱们在我的项目中没有引入 Transition、KeepAlive 等不罕用的组件，那么它们对应的代码就不会打包进去。

b. 移除了一些冷门的 feature

  • Vue.js 3.0 兼容了 Vue.js 2.x 绝大部分的 api，但还是移除了一些比拟冷门的 feature：如 keyCode 反对作为 v-on 的修饰符、$on，$off 和 $once 实例办法、filter 过滤、内联模板等。

3. 响应式实现优化：

a. 改用 proxy api 做数据劫持

  • Vue.js 2.x 外部是通过 Object.defineProperty 这个 API 去劫持数据的 getter 和 setter 来实现响应式的。这个 API 有一些缺点，它必须事后晓得要拦挡的 key 是什么，所以它并不能检测对象属性的增加和删除。
  • Vue.js 3.0 应用了 Proxy API 做数据劫持，它劫持的是整个对象，天然对于对象的属性的减少和删除都能检测到。

b. 响应式是惰性的

  • 在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它外部深层次的变动，就须要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能耗费。
  • 在 Vue.js 3.0 中，应用 Proxy API 并不能监听到对象外部深层次的属性变动，因而它的解决形式是在 getter 中去递归响应式，这样的益处是真正拜访到的外部属性才会变成响应式，简略的能够说是按需实现响应式，就没有那么大的性能耗费。

4. 编译优化：

a. 生成 block tree

  • Vue.js 2.x 的数据更新并触发从新渲染的粒度是组件级的，单个组件外部须要遍历该组件的整个 vnode 树。
  • Vue.js 3.0 做到了通过编译阶段对动态模板的剖析，编译生成了 Block tree。Block tree 是一个将模版基于动静节点指令切割的嵌套区块，每个区块外部的节点构造是固定的。每个区块只须要追踪本身蕴含的动静节点。

b.slot 编译优化

  • Vue.js 2.x 中，如果有一个组件传入了 slot，那么每次父组件更新的时候，会强制使子组件 update，造成性能的节约。
  • Vue.js 3.0 优化了 slot 的生成，使得非动静 slot 中属性的更新只会触发子组件的更新。动静 slot 指的是在 slot 下面应用 v -if，v-for，动静 slot 名字等会导致 slot 产生运行时动态变化然而又无奈被子组件 track 的操作。

c.diff 算法优化

  • 能力无限，说不清楚，能够看下这篇文章：https://blog.csdn.net/weixin_48726650/article/details/107019164

语法 api 优化

a. 优化逻辑组织

  • 应用 Vue.js 2.x 编写组件实质就是在编写一个“蕴含了形容组件选项的对象”，能够把它称为 Options API。咱们依照 data、props、methods、computed 这些不同的选项来书写对应的代码。这种形式对于小型的组件可能代码还能高深莫测，但对于大型组件要批改一个逻辑点，可能就须要在单个文件中一直高低切换和寻找逻辑代码。
  • Vue.js 3.0 提供了一种新的 API：Composition API，它有一个很好的机制去解决这样的问题，就是将某个逻辑关注点相干的代码全都放在一个函数里，这样在批改一个逻辑时，只须要改那一块的代码了。

b. 优化逻辑复用

  • 在 Vue.js 2.x 中，咱们个别会用 mixins 去复用逻辑。当抽离并援用了大量的 mixins，你就会发现两个不可避免的问题：命名抵触和数据起源不清晰。
  • Vue.js 3.0 设计的 Composition API，在逻辑复用方面就会很有劣势了。
退出移动版