首先要知道两点 ：
1.具体项目，具体分析，脱离场景看优化没有什么意义
2.我们做软件开发的，软件就是工具，为商业服务的工具，而商业追求的是什么，是利润，利润是什么，收益减成本，所以我们不能追求极致的优化，而浪费大量时间
但是也必须懂优化，下面总结了10个优化的方法
1.使用Key值
通过循环生成的列表，应该给每一个列表项一个稳定且唯一的key值，这样做的目的是为了，当数据发生变动时，尽可能少的删除，新增，改动元素，因为diff算法就是通过key值来进行比较的
2.使用冻结的对象
冻结的对象不会被响应化 Object.freeze 一般用在只展示数据并不会改变数据的场景。
3.使用函数式组件
有些时候，我们一个组件只是需要接受一些prop数据，而不会改变什么东西，这个时候可以用函数式组件 ,函数式组件在渲染的时候能减少一定的脚本运行时间，内存占用也少一些
4.使用计算属性
如果模板中某个数据使用多次，并且该数据是通过计算得到的，使用计算属性可以缓存它们。（缺陷不能传参）
5.非实时绑定的表单项
小知识：vue设计思想是关注的是数据而不是界面，代码的可维护性和可阅读性也很重要，js执行线程和浏览器渲染线程是互斥的，所以运行动画时执行jS线程动画会卡顿
当使用v-modle绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染，这会带来性能的开销
特别是当改变表单项时，页面有动画在执行，由于js线程和浏览器线程是互斥的，最终会导致动画出现卡顿。
可以通过使用v-model.lazy(失去焦点时)，或者不使用v-model,但是这样可能导致在某一时间段内数据和表单项的值是不一样的。
6.保持对象引用稳定
就比如说，我在添加评论列表的时候，添加一个数据之后，一般我们会再调用一次获取数据的接口，获取完数据，拿到了json对象，然而这个对象和原来的是两个不同的数据，然后就会重新渲染，但是很多数据都是相同的，没有必要重新渲染。所以我们可以在新增加一个数据之后，直接在原来的数据中把这个新增的数据加上，不用再调用获取所有数据的借口了，问题就是如果别人也在期间加了数据，那末页面显示的可能不实时（别人新增的展示不出来），但是我们也没有规定必须要实时展示数据，因为只要一刷新就好了。
通过这个也能看出，组件细分的好处，可以避免多余的渲染。
7.使用v-show代替v-if
对于频繁切换的元素，使用v-show可以保证虚拟dom数的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要。
关键字:频繁切换，内部包换大量dom元素
8.延迟装载defer
解决首页白屏问题 其实有时候用户体验不只是等待时间，如果在等待时间有个进度条啊，有个小孩在跑啊，也可以缓解这个问题
打包体积过大{
优化CDN
启动现代模式
页面分包（路由懒加载）
}
需要立即渲染的内容太多
延迟装载 defer是个思路 主要是 用 requestAnimationFrame渲染针来实现先后渲染
他的具体实现多种多样，有组件分批加载，数据分批加载
9.keep-alive
用于缓存内部组件实例，里面有include和exclude属性，max设置最大缓存数，超过后，自动删除最久没用的。
受到keep-alive影响，其内部的组件都具有两个生命周期，activated和deactivated ,分别再组件激活和失活时触发，第一次activated是在mounted之后。
一般用在需要多个页面频繁操作的场景（导航条）
10.长列表优化
一般用在app端下拉的时候，或者列表很长的时候，通过一个固定大小的渲染池来解决。通过滚动条等一些操作，减少页面渲染市场，有现成的库，vue-virtual-scroller
https://github.com/Akryum/vue-virtual-scroller
另加：
11.通过v-once创建低开销的静态组件，渲染一次后就缓存起来了，除非你非常留意渲染速度，不然最好不要用，因为有的开发者不知道这个属性或者看漏了，然后花费好几个小时来找为什么模板无法正确更新。
