createjs技术博客

说实话vue其实不适合做一些需要多对象同屏渲染和快速运动的项目，这是vue的特性导致的，响应式很多时候会造成严重的性能浪费，特别对于新手，稍为操作不当，就会给性能造成灾难性的后果，只不过很多时候因为pc的性能足够，而看不出问题。那么有没有办法解决呢？有！但是需要注意很多地方，今天我就来梳理一下。

1.避免同时使用v-if 和 v-for。

这个不解释，基础问题，同时使用每次循环都会判断

2.合理使用v-show，不要总是用v-if

v-if每次使用都需要重新渲染整个组件，v-show不会

3.当 v-for 过长或者频繁更新时 需要用:key 来防止重新渲染整个列表。

不解释了，也是基础问题。

4.当 v-for 过长或者频繁更新时，内部尽量不要使用函数，如果需要提前计算好再放进去。

这个知道的人真的不多，其实就算使用了key，每次数组更新，仍会从头到尾全部触发函数的执行，造成严重的性能浪费，最好的解决办法是数组在使用之前就把这些计算给计算好。

5.合理使用Keep-Alive

基础知识不解释。

6.watch的deep不要乱用。

watch设置成deep性能浪费严重，特别当对象特别大的时候，不是特别需要不要用。

7.不需要的响应式用Object.freeze()冻结对象。

8.如果有一堆按钮共用一个弹窗，不要把按钮和弹窗做成一个组件。

超多人喜欢这么干，按钮和弹窗做在一起，用起来确实舒服，但是，如果列表每个项的按钮都共用一个弹窗，这时候还做在一起的，那么点出来几个弹窗，就会有几个弹窗，浪费资源，特别是弹窗还比较复杂的话。

9.遇到多对象和动画项目，果断放弃vue改用canvas把，可以使用createjs，与vue的兼容性不错。

红字是特别容易踩坑的，之后如果还有发现，会持续更新……