Blog Docs GitHub WeChat Twitter Email

Vue 常见优化手段

May 08, 2023

永远不要过早优化，因为它可能会带来一些意外的代价，比如：开发周期变长、开发成本增加、代码难以阅读/难以维护。所以，请在合适的时候，再去优化

使用 key

对于通过循环生成的列表，应该给每个列表项一个稳定且唯一的 key，这有利于在列表变动时，尽量地减少 DOM 操作，从而提升性能。

使用 冻结对象

冻结的对象不会被相应化

场景&场景：由于 Vue 的数据是响应式的，每次更新的时候，都会去遍历数据，如果数据很多/深的时候，这会浪费一些时间。当数据不需要用到响应式特性的时候，我们可以把数据冻结起来，这样 Vue 这个数据就不会被遍历

使用 函数式组件

函数组件是用来纯渲染页面的，数据是不响应式的，渲染的时间会更快，并且占用的内存更少，效率更高

如何使用：在 Vue.component 中添加 functional: true

使用 计算属性

如果模板中某个数据会使用多次，并且数据是需要通过计算得到的，我们就可以使用计算属性缓存它们，而且它还会跟随依赖，依赖一变化，它也会变化

非实时绑定的表单项不使用 v-model

当使用 v-model 绑定一个表单时，当用户改变表单项的状态时，也会随之改变数据，从而导致 vue 发生 重新渲染/rerender，这会带来一些性能开销。

我们可以通过 v-model.lazy 或者不使用 v-model 的方式解决这个问题，但要注意，这样可能会导致再某一个时间段内数据和表单的值是不一致的。

保持对象引用稳定

大部分情况下 vue 触发 重新渲染/rerender 的时机是依赖的数据发生变化

如果数据没有发生变化，哪怕给数据重新赋值，vue 也不会做出任何处理

下面是 vue 判断数据变化的源码

1
2
3
4
5
6
7
function hasChanged(x: unknown, y: unknown): boolean {
  if (x === y) {
    return x === 0 && 1 / x !== 1 / (y as number)
  } else {
    return x === x || y === y
  }
}
  • 因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染
  • 对于原始数据类型，保持值不变即可
  • 对于对象类型，保持引用不变即可

从另一方面说，由于可以通过保持属性引用稳定来避免子组件的重新渲染，所以我们应该细分组件来尽量避免多余的渲染

使用 v-show 代替 v-if

对于「频繁切换」显示状态的元素，使用 v-show 可以保证虚拟 DOM 树 的稳定，避免频繁的新增和删除元素，特别是对于那些「内部包含大量 DOM 元素」的节点元素，这一点非常重要

使用 defer（延迟装载）

延迟装载是一种思路，本质上是利用 requestAnimationFrame 分批渲染内容，它的具体实现多种多样

  • JS 传输完成后，浏览器开始执行 JS 构造页面
  • 当可能一开始要渲染的组件太多，不仅 JS 执行时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏
  • 一个可行的办法就是「延迟装载组件」，让组件按照指定的先后顺序一次一个一个渲染出来

感谢阅读，下次见 :)

OLDER > < NEWER
cd ../