【vue2】vue2中的性能优化(持续更新中)

简介: vue2中的性能优化

【前言】

该系列是博主在使用vue2开发项目中常用上的一些小Tips,学的开心!

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

在 Vue2 中当v-for与v-if同时用的时,v-for的优先级比v-if高。这样就会造成一种现象:不管v-if的判断条件,vue都会把这个v-for循环走完再来判断。那么我们应该怎么把数据进行渲染过滤之后再显示提高性能呢?使用计算属性。

请看下面这段代码:

<template>
  <div>
    <ul>
      <li v-for="item in filterList" :key="item.id">
        {{ item.user }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'father-page',
  data () {
    return {
      list: [
        { isActive: true, user: '初映', id: 1 },
        { isActive: false, user: '测试1', id: 2 },
        { isActive: false, user: '测试2', id: 3 },
        { isActive: true, user: '测试3', id: 4 },
        { isActive: false, user: '测试4', id: 5 }
      ]
    }
  },
  computed: {
    filterList () {
      return this.list.filter(item => {
        return item.isActive
      })
    }
  }
}
</script>
<style>
div {
  color: teal;
  margin-top: 50px;
}
</style>

代码分析:我们将筛选与渲染到页面这两个步骤抽离出来了。

我们通过计算属性对我们的原数组进行一个过滤筛选的操作(将isActive:true)的项进行返回。

遍历的对象不再是我们原本的list而是我们过滤之后的filterList。这样就避免了v-if与v-show没有一起使用进一步的提升了我们的性能啦!

5583230d841f406b8f6e6f6f3c4c93a6.png

⭐ v-for 中的key绑定唯一的值

key是必须加上的,不加上的化ESlint也提示缺少配置项。key值是唯一标识,目的是为了更加高效的更新虚拟DOM。可当我们不在v-for中的key添加唯一标识,会发生什么错误呢?

页面渲染正常,但是浏览器会报错。提示key值重复错误:

b8bff742606f40d29bcb9870c908300e.png

这是v-for中key需要写唯一的值,其他地方也需要吗?尽量使用唯一标识,因为key其目的是确保正确的更新。没有key默认是就地复用的策略,可能会导致复用了的页面的结构不会更新导致渲染发现数据缺失。

⭐ v-show与v-if对性能的影响

这两者的作用是一样的,控制我们组件的是否渲染在页面上。使用场景进一步的细分会进一步提高我们性能。

v–if的执行底层是对一个组件的创建与销毁。这样就会导致一个问题,如果是需要多次触发渲染的组件就会导致我们对组件频繁的渲染与销毁。那么处理频繁触发的组件显示与否,我们更推荐使用v-show。

v-show的执行底层是类似于控制组件的css样式的显示与否,我们这样做就避免的在频繁的切换过程中我们对于组件的创建又销毁了。

综上所述:v-if更推荐用于页面不是经常需要切换的场景(不需要切换的时候就不需要创建新的组件,我们的性能会更高)。v-show适合需要频繁切换的场景中。

⭐ 妙用计算属性

计算属性是一种处理数据用来解决代码的冗余的方式,当处理不需要常变化的值推荐使用这个。计算属性就有缓存机制,这种机制可以提高我们的性能。当我们数据有变化的时候才执行,没变化时无论怎么调用都只是执行第一次的结果。只有当计算属性中的值发生变化时,这个函数才会重新执行一次。

计算属性写法:

computed:{
变量名(){
return this.//需要处理的数据
}
}

上述只是基本的概念,更多相关内容,大家可移步:计算属性与侦听器的用法区别

⭐ 使用防抖与节流控制发送频率

防抖:在规定时间内触发最后一次。节流在规定时间内触发规定次数。这两者根据使用场景来能很好的提升用户的使用感受。比如做发送验证码功能的时候,我们可以利用节流的特性让用户避免发送多个验证码,当用户点击‘发送验证码’之后我们将该按钮设置为禁止再次触发。

⭐ 路由守卫处理请求避免重复发送请求

路由守卫是作用于我们与页面之间的跳转。业务中常有一个这样的逻辑判断:

我存在token了我才可去白名单中的页面,当其他页面也需要其他信息时候就需要再次发送请求获取了。逻辑当然也是没毛病,但是我们可以优化一下我们请求。

const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      // console.log('已经存在token了,不会跳登录页,现在去首页')
      next('/')
    } else {
      // console.log('token存在不是去登录页,给与放行')
      if (!store.state.user.userInfo.userId) {
        // 前面加上await与async 是便于我们获取信息之后再去跳转以达到:页面跳转前我们的数据就收到了,否则可能会因为网速等原因报错
        const menus = await store.dispatch('user/getUserInfo')
      }

代码释意:当我们存在token与我们在其他页面有共用的信息。我们就可以写一个判断,这样就可以第一次页面加载的时候发送请求,之后token存在的时候就不需要发送请求再去获取我们需要的信息了,从而达到降低发送ajax请求来提高我们的性能。

⭐ 使用第三方UI库的引入方式

在使用第三方UI库的根据业务来看判断按需引入还是全部引入。这个就比较好理解了,全部引入资源加载量多,项目运行的速度会变慢一点。按需引入就能够按需所取(强烈推荐)

关于全家桶中UI库的使用方式,大家可移步:ElementUI与Vant2的引入使用方法



相关文章
|
6月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
12月前
|
缓存 JavaScript 前端开发
Vue3与Vue2生命周期对比:新特性解析与差异探讨
Vue3与Vue2生命周期对比:新特性解析与差异探讨
577 3
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1509 0
|
7月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
448 2
|
11月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
463 60
|
7月前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
JavaScript API 开发工具
vue2和vue3版本区别
【10月更文挑战第4天】
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
613 59
|
11月前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
188 17
|
11月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
274 17

热门文章

最新文章