Vue性能优化的方法

今天来谈一谈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性能优化的资料请关注脚本之家其它相关文章！

最新评论