性能优化方案:

函数型组件
子组件拆分
局部变量
活用v-show、减少v-if
使用keep-alive
活用延迟装载(Defer)
分批处理(Time slicing)
非响应模式(non-reactive)
仅渲染可视化部分

一、函数型组件

描述:

函数型组件(无状态组件)可以忽略整个组件的生命周期的一些加载，没有vue上下文，只关心对内容的渲染!

二、子组件拆分

描述:

子组件拆分，将一些重度渲染的内容放到子组件去做处理，减少父组件生命周期加载负荷，关系到父组件、与子组件生命周期加载之间的顺序流程!

三、局部变量

描述:

vue中所绑定的属性都是响应式的，减少对响应式的数据频繁更改，在对响应式数据作为引用并更改时，尽量将响应式的数据作为局部变量做处理！计算属性中的base值若发生变化，则计算属性会在做一次相应的计算处理，那么以下对base值做了1000次处理，因此计算属性便会处理1000次！然而将base做为常量接收时，便不会对原计算属性中的base值做处理，base值不做改变，计算属性(有缓存，值若不发生变化，计算属性就会引用原有的值)便就不会触发处理行为!

四、v-show 和 v-if

描述:

v-show 和 v-if 根据条件判断改变元素是否隐藏和显示，但区别在于, v-show 是通过 display:none 来控制dom的显示与否，而 v-if则是删除dom元素本身与 dom元素创建，来控制显示与否!

五、keep-alive

描述:

keep-alive 可以缓存路由组件，当某些路由组件下数据状态不需要变化时，可以通过keep-alive来控制，缓存的组件，第一次初始化组件状态(vue 实例以及 vue 的生命周期)后，后续无需重新初始化！

六、延迟装载(defer)

描述

延迟加载页面所加载比较笨重的、影响性能的组件，通过定义defer函数传入加载顺序，可优先顺序加载靠前的，然后在接着加载组件比较笨重的组件!

七、分批处理

描述

将一次性加载的功能，进行分批处理！

八、非响应模式(非观察模式)

描述

将只需要用来大批量展示的数据，改为非响应模式，不在需要 vue 去做 setter 和 getter 响应的处理! 另外Object.freeze()也可以帮我们冻结一个对象或一个数组, 冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。