文章目录

总原则

  • 减少界面渲染的节点/组件数量，如果不能减少节点/组件数量，则考虑是否能够分批次渲染
  • 减少更新节点/组件的数量
  • 减少响应式变量的重复访问

零、不要过早优化

注意：一定要先实现目标业务或功能，后续再考虑优化问题，过早的考虑性能优化，很可能使你陷入进退两难的地步。优先实现业务功能才是第一要务。

一. 使用函数式组件

适用情况

纯显示组件

原理

函数组件相对于普通组件，内部没有响应式变量，没有生命周期钩子，因此初始化过程/更新过程相对于普通组件要简单/快很多

官网说明

函数式组件详细说明

实例与分析

二. 组件拆分

适用情况

大组件/大表单

原理

Vue的更新粒度为组件，将一个大组件或大表单拆分为多个小组件，数据更新时，只会涉及到对应的小组件，能够有效较少需要diff的vnode数量

实例与分析

三. 尽量适用普通变量而非响应式变量

适用情况

for循环

原理

vue默认会将data中定义的变量变为响应式变量，而获取和设置响应式变量的变量值时，会触发很多额外的操作（如：依赖收集和唤醒观察者），这些操作是需要耗费一定性能的，如果能避免，应该尽量避免

实例与分析

四. 适当考虑v-show替代v-if

适用情况

组件需要做显示/隐藏控制的时候

原理

v-if从显示到隐藏，是会将组件/节点完全删除的，从隐藏到显示组件/节点必须完整的经历一次创建过程，而v-show只是组件/节点的显示和隐藏，不必每次都执行组件/节点的完整创建过程

实例与分析

五. 使用KeepAlive

六. 使用Deferred延迟分批渲染

适用情况

大组件/大表单的渐进式渲染

原理

不是一次性就将整个组件/表单的内容全部渲染出来，而是每次渲染一部分，从而避免JS执行时间过长，导致的界面卡顿现象

实例与分析

七. 分批次提交

八. 使用非响应式数据

九. 使用虚拟滚动

相关文章与源码

主相关

拓展相关

# 性能优化 # 前端 # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue