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’);即可。
VUE性能优化总结的更多相关文章
- Vue性能优化
今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人 ...
- Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- 前端vue性能优化
一:代码层次优化 1.1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时 ...
- 浅谈vue性能优化
基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- Vue 性能优化track-by
Vue 是一个MVVM框架 所谓mvvm就是model-->view,view-->model. vue帮助我们实现了自动绑定.省点我们用JQUERY,zpeto 去操作dom的麻烦. 主 ...
- vue性能优化1--懒加载
懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间 ...
- vue性能优化2--引入cdn
当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且.浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代 ...
随机推荐
- Django-url路由映射与views逻辑处理
一.URL路由映射 路由映射模块,主要完成url与views视图函数的映射.当一个url请求到来时,会按照这个模块中的url地址从上到下进行匹配,如果匹配成功,将执行映射试图中的函数:反之将返回404 ...
- WinForm 数据库无限填充树目录 treeView
我自己想的是处理数据库每一条数据,然后来插入子节点的子节点. 奈何没有插入子节点的子节点的办法,百度来百度去,一看全都是递归. 本来我是绝望的, 但是没办法,老板的需求不能驳回啊,于是就来ctrl c ...
- Java Jxl
Java Jxl (转自http://blog.csdn.net/laliocat/article/details/50580020) 1 开发调研1.1 需求描述MS的电子表格(Excel)是Off ...
- windows下整数溢出分析
0x00前言 整数溢出就是往存储整数的内存单位存放的数据大于该内存单位所能存储的最大值,整数溢出有时候间接导致缓冲区溢出.如JPEG溢出漏洞(MS04-028). 0x01整数溢出分类 整数溢出可以分 ...
- POJ 1904 King's Quest tarjan
King's Quest 题目连接: http://poj.org/problem?id=1904 Description Once upon a time there lived a king an ...
- 最小生成树-克鲁斯卡尔算法(kruskal's algorithm)实现
算法描述 克鲁斯卡尔算法是一种贪心算法,因为它每一步都挑选当前最轻的边而并不知道全局路径的情况. 算法最关键的一个步骤是要判断要加入mst的顶点是否会形成回路,我们可以利用并查集的技术来做. 并查集的 ...
- Git_配置别名
有没有经常敲错命令?比如git status?status这个单词真心不好记. 如果敲git st就表示git status那就简单多了,当然这种偷懒的办法我们是极力赞成的. 我们只需要敲一行命令,告 ...
- angularjs-ui插件ui-select和html的select注意事项及区别
项目中使用了angular-ui里的ui-select指令,地址https://github.com/angular-ui/ui-select 1. ng-model没有双向数据绑定 最开始没有看手册 ...
- MySQL命令行工具各功能说明(转)
MySQL 服务器端使用工具程序 mysqld - SQL 后台程序(即 MySQL 服务器进程).该程序必须启动运行,才能连接服务器来访问数据库. mysqld_safe - 服务器启动脚本,可以通 ...
- Android peferenceActivity 自己定义标题简单方法
Android peferenceActivity 自己定义标题简单方法 peferenceActivity 全然使用定义好的布局. 因此不能简单象其他好窗体进行自定,如今我们须要加 一个自己定义标题 ...