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

这篇具有很好参考价值的文章主要介绍了【vue2】vue2中的性能优化(持续更新中)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

⭐ v-for 遍历避免同时使用 v-if
⭐ v-for 中的key绑定唯一的值
⭐ v-show与v-if对性能的影响
⭐ 妙用计算属性
⭐ 使用防抖与节流控制发送频率
⭐ 路由守卫处理请求避免重复发送请求
⭐ 使用第三方UI库的引入方式

【前言】

该系列是博主在使用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没有一起使用进一步的提升了我们的性能啦!
    vue2性能优化,vue2,javascript,前端,vue.js,前端框架,elementui

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

key是必须加上的,不加上的化ESlint也提示缺少配置项。key值是唯一标识,目的是为了更加高效的更新虚拟DOM。可当我们不在v-for中的key添加唯一标识,会发生什么错误呢?
页面渲染正常,但是浏览器会报错。提示key值重复错误:vue2性能优化,vue2,javascript,前端,vue.js,前端框架,elementui
这是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的引入使用方法

至此本文结束,愿你有所收获!
期待大家的关注与支持! 你的肯定是我更新的最大动力文章来源地址https://www.toymoban.com/news/detail-792488.html

到了这里,关于【vue2】vue2中的性能优化(持续更新中)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript中的数据缓存与内存泄露:解密前端性能优化与代码健康

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-数据缓存与内存泄露 目录 说说你对事件循环的理解 一、是什么 二、宏任务与微任务 微任务 宏任务 三、async与await async await 四、

    2024年02月03日
    浏览(76)
  • Vue2相关面试题(持续更新)

    前言 目前这套面试题只适合 初级前端 ,后面会进行深层次补充和拓展以及Vue2源代码的讲解(虽然Vue2今年开始不维护了,但是我的面试题不会止步,冲冲冲)。 在面试的过程中,一定要清楚哪些该说哪些不该说,如果一个知识点不太清楚,就不要做过多的解释,一笔带过就

    2024年02月04日
    浏览(36)
  • Vue2到3 全套学习内容(持续更新)

    目录 一、Vue 初次上手  1. Vue 概念 2.创建 Vue 实例,初始化渲染  3.插值表达式 4.响应式特性 5.安装 Vue 开发者工具: 装插件调试 Vue 应用 二、Vue 指令  1.内容渲染指令 v-text,v-html  2.1 条件渲染指令 v-show , v-if 2.2 条件渲染指令 v-else, v-else-if 3.事件绑定指令  v-on 1️⃣内

    2024年02月15日
    浏览(40)
  • unity移动端性能优化技术整理(持续更新)

    本文主要针对一些常见的性能优化的点进行总结。属于一个high level的overview。需要注意只有当这些模块确定成为制约帧时间的瓶颈时,才能够进行针对性地优化,否则可能会适得其反,事倍功半。 一般来说,移动端性能优化,如果同时支持ios和android,建议先从ios开始优化,

    2024年02月06日
    浏览(42)
  • 在Vue 3中,对于组件中的插槽(slots)生成进行了优化,以提高渲染性能和组件的更新速度。

    在Vue 3中,对于组件中的插槽(slots)生成进行了优化,以提高渲染性能和组件的更新速度。 在Vue 2中,每当一个插槽被渲染时,都会生成一个函数来创建对应的VNode节点。这意味着即使插槽内容保持不变,每次渲染时仍然会重新生成相同的VNode节点。 而在Vue 3中,通过使用新

    2024年02月12日
    浏览(49)
  • 前端页面性能优化,性能测试算法优化,MeterSphere开源持续测试平台v2.10.5 LTS版本发布

    2023年8月7日,MeterSphere一站式开源持续测试平台正式发布v2.10.5 LTS版本。自2023年5月发布v2.10 LTS版本后,MeterSphere开源项目组坚持每两周发布小版本,持续进行问题的修复更新,并针对部分功能进行优化。 本次发布的MeterSphere v2.10.5 LTS版本在前端页面性能、性能测试算法、后端

    2024年02月14日
    浏览(41)
  • MySQL 数据存储和优化------MySQL索引原理和优化 ---- (架构---索引---事务---锁---集群---性能---分库分表---实战---运维)持续更新

    Mysql架构体系全系列文章主目录(进不去说明还没写完) https://blog.csdn.net/grd_java/article/details/123033016 本文只是整个系列笔记的第二章:MySQL索引原理和优化,只解释索引相关概念。 索引可以提高查询效率,影响where查询和order by排序,它可以从多方面进行分类,但是实际创建时

    2024年02月02日
    浏览(54)
  • 【 Vue3 性能优化】页面加载性能 与 更新性能

    Vue 在大多数常见场景下性能都是很优秀的,通常不需要手动优化。然而,总会有一些具有挑战性的场景需要进行针对性的微调。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus教程 权限系统-商城 个人博客地址 Web 性能优化主要有两个方面: 页面加载性能 首次访问时,应

    2024年02月14日
    浏览(45)
  • 前端vue常见60道面试题 重点简洁!!!【未完,文章持续更新中......】

    model 代表数据模型,数据和业务逻辑都在 model 层中定义 view 代表视图,负责数据展示 view model 代表与界面对应的 model MVVM 是 MVC 的变种进阶,在概念上真正将页面与数据逻辑分离的模式,把数据绑定放到一个 js 中去实现,这个 js 文件主要功能是完成数据的双向绑定,把 mod

    2024年02月06日
    浏览(60)
  • 【前端vue3面试题】2023最新面试实录vue3.0,高频10问(持续更新...)

    前端vue3面试题 2023最新面试实录vue3.0,高频10问(持续更新…) 1问: vue3和vue2有哪些不同? 响应式系统的重构,使用proxy替换Object.defineProperty属性,优势: Proxy可直接监听 对象 添加/删除 属性; Proxy直接监听 数组的变化 Proxy监听的目标是对象本身,不需要像Object.defineProperty那样遍

    2023年04月14日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包