0
0

12 个 Vue 开发中的性能优化小技巧，看你用过几个(上)

性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，重视性能问题，优化产品的体验，比起改几个无关痛痒的 bug 要有价值得多

本文记录了我在 Vue 项目日常开发中的一些小技巧，废话不多说，我们开始吧

1. 长列表性能优化

1. 不做响应式

比如会员列表、商品列表之类的，只是纯粹的数据展示，不会有任何动态改变的场景下，就不需要对数据做响应化处理，可以大大提升渲染速度

比如使用**

  1. Object.freeze()

** 冻结一个对象，MDN的描述是 该方法冻结的对象不能被修改；即不能向这个对象添加新属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值，以及该对象的原型也不能被修改

或者把数据写在 data 里面 return 上面，也没有响应式
或者自定义option，写在和data同级，再使用 $options.xxx获取
或者干脆就写在外面，或者通过引入的方式，也没有响应式

2. 虚拟滚动

如果是大数据很长的列表，全部渲染的话一次性创建太多 DOM 就会非常卡，这时就可以用虚拟滚动，只渲染少部分(含可视区域)区域的内容，然后滚动的时候，不断替换可视区域的内容，模拟出滚动的效果

  1. <recycle-scroller
  2.   class="items"
  3.   :items="items"
  4.   :item-size="24"
  5. >
  6.   <template v-slot="{ item }">
  7.     <FetchItemView
  8.       :item="item"
  9.       @vote="voteItem(item)"
  10.     />
  11.   </template>
  12. </recycle-scroller>

参考 vue-virtual-scroller、vue-virtual-scroll-list

原理是监听滚动事件，动态更新需要显示的 DOM，并计算出在视图中的位移，这也意味着在滚动过程需要实时计算，有一定成本，所以如果数据量不是很大的情况下，用普通的滚动就行

2. v-for 遍历避免同时使用 v-if

为什么要避免同时使用**

  1. v-for

** 和 **

  1. v-if

**

在 Vue2 中 **

  1. v-for

**优先级更高，所以编译过程中会把列表元素全部遍历生成虚拟 DOM，再来通过 v-if 判断符合条件的才渲染，就会造成性能的浪费，因为我们希望的是不符合条件的虚拟 DOM都不要生成

在 Vue3 中**

  1. v-if

** 的优先级更高，就意味着当判断条件是 v-for 遍历的列表中的属性的话，v-if 是拿不到的

所以在一些需要同时用到的场景，就可以通过计算属性来过滤一下列表，如下

  1. <template>
  2.     <ul>
  3.       <li v-for="item in activeList" :key="item.id">
  4.         {{ item.title }}
  5.       </li>
  6.     </ul>
  7. </template>
  8. <script>
  9. // Vue2.x
  10. export default {
  11.     computed: {
  12.       activeList() {
  13.         return this.list.filter( item => {
  14.           return item.isActive
  15.         })
  16.       }
  17.     }
  18. }
  20. // Vue3
  21. import { computed } from "vue";
  22. const activeList = computed(() => {
  23.   return list.filter( item => {
  24.     return item.isActive
  25.   })
  26. })
  27. </script>

3. 列表使用唯一 key

比如有一个列表，我们需要在中间插入一个元素，在不使用 key 或者使用 index 作为 key 会发生什么变化呢？先看个图

如图的 **

  1. li1

**和 **

  1. li2

不会重新渲染，这个没有争议的。而

  1. li3、li4、li5

** 都会重新渲染

因为在不使用**

  1. key

或者列表的

  1. index

作为

  1. key

的时候，每个元素对应的位置关系都是 index，上图中的结果直接导致我们插入的元素到后面的全部元素，对应的位置关系都发生了变更**，所以在 patch 过程中会将它们全都执行更新操作，再重新渲染。这可不是我们想要的，我们希望的是渲染添加的那一个元素，其他四个元素不做任何变更，也就不要重新渲染

而在使用唯一**

  1. key

的情况下，每个元素对应的位置关系就是

  1. key

**，来看一下使用唯一 **

  1. key

**值的情况下

这样如图中的** 

  1. li3

和 

  1. li4

就不会重新渲染，因为元素内容没发生改变，对应的位置关系也没有发生改变**。

这也是为什么 v-for 必须要写 key，而且不建议开发中使用数组的 index 作为 key 的原因

4. 使用 v-show 复用 DOM

**

  1. v-show

**：是渲染组件，然后改变组件的 display 为 block 或 none
**

  1. v-if

**：是渲染或不渲染组件

所以对于可以频繁改变条件的场景，就使用 v-show 节省性能，特别是 DOM 结构越复杂收益越大

不过它也有劣势，就是 v-show 在一开始的时候，所有分支内部的组件都会渲染，对应的生命周期钩子函数都会执行，而 v-if 只会加载判断条件命中的组件，所以需要根据不同场景使用合适的指令

比如下面的用 **

  1. v-show

** 复用DOM，比 **

  1. v-if/v-else

**效果好

  1. <template>
  2.   <div>
  3.     <div v-show="status" class="on">
  4.       <my-components />
  5.     </div>
  6.     <section v-show="!status" class="off">
  7.       <my-components >
  8.     </section>
  9.   </div>
  10. </template>

原理就是使用 v-if 当条件变化的时候，触发 diff 更新，发现新旧** vnode 不一致，就会移除整个旧的

  1. vnode

**，再重新创建新的 **

  1. vnode

**，然后创建新的 **

  1. my-components

** 组件，又会经历组件自身初始化，**

  1. render

，

  1. patch

**等过程，而 **

  1. v-show

** 在条件变化的时候，新旧 **

  1. vnode

** 是一致的，就不会执行移除创建等一系列流程

5. 无状态的组件用函数式组件

对于一些纯展示，没有响应式数据，没有状态管理，也不用生命周期钩子函数的组件，我们就可以设置成函数式组件，提高渲染性能，因为会把它当成一个函数来处理，所以开销很低

原理是在 **

  1. patch

** 过程中对于函数式组件的 **

  1. render

** 生成的虚拟 DOM，不会有递归子组件初始化的过程，所以渲染开销会低很多

它可以接受**

  1. props

**，但是由于不会创建实例

，所以内部不能使用 **

  1. this.xx

** 获取组件属性，写法如下

  1. <template functional>
  2.   <div>
  3.     <div class="content">{{ value }}</div>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   props: ['value']
  9. }
  10. </script>
  12. // 或者
  13. Vue.component('my-component', {
  14.   functional: true, // 表示该组件为函数式组件
  15.   props: { ... }, // 可选
  16.   // 第二个参数为上下文，没有 this
  17.   render: function (createElement, context) {
  18.     // ...
  19.   }
  20. })

6. 子组件分割

先看个例子

  1. <template>
  2.   <div :style="{ opacity: number / 100 }">
  3.     <div>{{ someThing() }}</div>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   props:['number'],
  9.   methods: {
  10.     someThing () { /* 耗时任务 */ }
  11.   }
  12. }
  13. </script>

上面这样的代码中，每次父组件传过来的**

  1. number

** 发生变化时，每次都会重新渲染，并且重新执行 **

  1. someThing

** 这个耗时任务

所以优化的话一个是用计算属性，因为计算属性自身有缓存计算结果的特性

第二个是拆分成子组件，因为 Vue 的更新是组件粒度的，虽然每次数据变化都会导致父组件的重新渲染，但是子组件却不会重新渲染，因为它的内部没有任何变化，耗时任务自然也就不会重新执行，因此性能更好，优化代码如下

  1. <template>
  2.   <div>
  3.     <my-child />
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   components: {
  9.     MyChild: {
  10.       methods: {
  11.         someThing () { /* 耗时任务 */ }
  12.       },
  13.       render (h) {
  14.         return h('div', this.someThing())
  15.       }
  16.     }
  17.   }
  18. }
  19. </script>

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作 者：码喽的自我修养❣️

📝 专 栏：前端常见问题与避坑指南

🌈 若有帮助，还请*** 关注➕点赞➕收藏 ***，不行的话我再努努力💪💪💪

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战

标签： vue.js 前端 javascript
本文转载自: https://blog.csdn.net/2301_78542842/article/details/143859171
版权归原作者 码喽的自我修养 所有， 如有侵权，请联系我们删除。
登录后发布评论

“12 个 Vue 开发中的性能优化小技巧，看你用过几个(上)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。