码迷,mamicode.com
首页 > 其他好文 > 详细

VUE性能优化总结

时间:2018-06-08 22:40:19      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:直接   默认   uri   封装   数据   ace   const   strong   问题:   

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’);即可。

 

 

VUE性能优化总结

标签:直接   默认   uri   封装   数据   ace   const   strong   问题:   

原文地址:https://www.cnblogs.com/goloving/p/9157791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!