VUE性能优化总结
2018-06-08 22:20
399 查看
1、v-show,v-if 用哪个?
在我来看要分两个维度去思考问题:
第一个维度是权限问题,只要涉及到权限相关的展示无疑要用
第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的使用
这里要说的优化点在于减少页面中 dom 总数,我比较倾向于使用
2、不要在模板里面写过多的表达式与判断
适当的写到 methods 和 computed 里面封装成一个方法,这样的好处是方便我们在多处判断相同的表达式,其他权限相同的元素再判断展示的时候调用同一个方法即可。
3、循环调用子组件时添加 key
key 可以唯一标识一个循环个体,可以使用例如
假如数组数据是这样的
当 Vue.js 用
4、对路由组件进行懒加载
这里的懒加载是指在访问到对应的组件时才加载它,首屏的时候不加载。这里实现的方法很简单,只要将以前直接import组件的方式改为:
const Login = () => import('@/pages/Login’);即可。
在我来看要分两个维度去思考问题:
第一个维度是权限问题,只要涉及到权限相关的展示无疑要用
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性能优化经验
- Vue 性能优化经验总结
- XCel 项目总结 - Electron 与 Vue 的性能优化
- .NET 性能优化方法总结
- 关于Android性能优化的简单总结
- HBase性能优化方法总结(2):表的设计
- WPF程序性能优化总结
- 前端性能优化方法总结
- 35 个 Java 代码性能优化总结
- 35个Java代码性能优化总结
- Android 内存泄漏总结----Android应用优化---Android应用性能优化实践
- 35 个 Java 代码性能优化总结
- JavaScript性能优化小知识总结
- 【总结】Spark性能优化指南——高级篇
- HBase性能优化方法总结
- 给 App 提速:Android 性能优化总结
- Tair LDB基于Prefixkey中期范围内查找性能优化项目总结
- 【转载】HBase性能优化方法总结(3):写表操作
- 常见性能优化策略的总结
- mysql性能优化配置总结