DDR爱好者之家

Vue性能优化的方法
站长资源 2024/11/24 佚名
47 1538
DDR爱好者之家 Design By 杰米

今天来谈一谈Vue中一些性能优化的问题，仅仅是个人使用中的一些小心得，来，今天我一句废话不多说，直接上内容好吧

　　1.v-if和v-show的使用，

　　　　我们都知道这两个都可以控制显隐，那我们用哪个呢，个人觉得要从两个方面入手来确定使用哪个，

　　　　1.权限的问题，只要涉及到权限相关的展示用v-if比较好

　　　　2.切换地频率，如果频繁的切换我们用v-show，不频繁的切换用v-if

　　其实两者各有优缺，就看你是怎么选择了，用v-if能减少页面中的DOM总数，加快渲染的速度，而且我们要清楚一个事情

　　v-if是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

　　v-if也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show

　　就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

　　2.使用动画时可以用CSS启动硬件加速，

　　　　CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行,那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发 的CSS规则，可以用transform: translateZ(0); 来开启硬件加速，transform: translate3d(0, 0, 0)也可以。

　　3.组件懒加载，

　　　　这个很有用的，例如，当我们在一个很长的页面时，用户可能只会去看前一两屏，那剩下没被用用户观看的组件也会被加载，这样就会浪费我们的资源，我们使用组件懒加载在阻止性能浪费

　　4.为item设置唯一key值，

　　　　方便Vuex的内部机制在循环时能够准确的找到该条列表数据

　　5.减少watch的数据，在有可能的前提下，减少没有必要的state数据

　　　　因为当watch的数据比较大的时候，会大量消耗性能，所以我们可以使用事件中央总线或者Vuex进行数据的变更操作

　　　　为什么要减少没有必要的state数据，这和Vue的响应式原理有关，Vue会使用 Object.defineProperty 把这些属性全部转为 getter/setter ,并建立相应的Watcher来监控，这就造成一个问题，当我们的state特别多时，对应的Watcher也就会特别多，容易造成卡顿，这也是为什么在大型项目（状态特别多）我们会选用React而不用Vue的原因

　　6.图片按需加载，这个算是基础操作了吧

　　7.SSR（服务端渲染）

　　　　如果项目比较大，首屏无论怎么做优化，都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)

　　8.骨架屏加载

　　　　在页面加载资源较多，可能会出现白屏和闪屏的情况，体验不好，这个时候我们可以使用骨架屏

　　　　（骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉）

　　9.打包时的优化

　　　　有时候我们打完包之后发现包会很大，那怎么解决这个问题呢，其实很简单，在项目中，我们不是引入了诸如axios，vuex，vue-router等的包吗，那我们将这些包剔除出去，

　　　　换用cdn直接引入到我们项目的根目录的html当中，

　　　　注意在 webpack 里有个 externals配置，可以忽略不需要打包的库

目前的总结的就是这些，如果以后想起来还有别的，我会再回来添加的，在下告辞，不用想我，我去用个早膳，一会就回来好吧

以上就是Vue性能优化的方法的详细内容，更多关于Vue性能优化的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米