zoukankan      html  css  js  c++  java
  • VUE性能优化总结

    1、v-show,v-if 用哪个?

      在我来看要分两个维度去思考问题:

      第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if

      第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的使用 v-show,不频繁切换的使用 v-if

      这里要说的优化点在于减少页面中 dom 总数,我比较倾向于使用 v-if,因为减少了 dom 数量,加快首屏渲染,至于性能方面我感觉肉眼看不出来切换的渲染过程,也不会影响用户的体验。

    2、不要在模板里面写过多的表达式与判断

      v-if="isShow && isAdmin && (a || b)",这种表达式虽说可以识别,但是不是长久之计,当看着不舒服时,

      适当的写到 methods 和 computed 里面封装成一个方法,这样的好处是方便我们在多处判断相同的表达式,其他权限相同的元素再判断展示的时候调用同一个方法即可。

    3、循环调用子组件时添加 key

      key 可以唯一标识一个循环个体,可以使用例如 item.id 作为 key,

      假如数组数据是这样的 ['a' , 'b', 'c', 'a'],使用 :key="item" 显然没有意义,更好的办法就是在循环的时候 (item, index) in arr,然后 :key="index"确保 key 的唯一性

      当 Vue.js 用v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):

    4、对路由组件进行懒加载

      这里的懒加载是指在访问到对应的组件时才加载它,首屏的时候不加载。这里实现的方法很简单,只要将以前直接import组件的方式改为:

      const Login = () => import('@/pages/Login’);即可。

     

  • 相关阅读:
    深入浅出js单例模式
    前端常见面试-存储/缓存篇
    JavaScript内存管理
    delete操作符
    解决window.location.href跳转无效问题解决办法
    前端程序员经常忽视的一个JavaScript面试题
    【华为云技术分享】漫谈LiteOS-端云互通组件-MQTT开发指南(上)
    【华为云技术分享】序列特征的处理方法之二:基于卷积神经网络方法
    【华为云技术分享】原来CTR预估模型的发展有这样的规律
    【华为云技术分享】在家办公怎么弄?华为云DevCloud宝典一看就懂——项目管理篇
  • 原文地址:https://www.cnblogs.com/goloving/p/9157791.html
Copyright © 2011-2022 走看看