------------恢复内容开始------------
1.用key：key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们
diff算法判断一个元素是否相等的依据有两个：元素类型和key值。
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
2.使用冻结对象
Object.freeze(xx);冻结后的属性是不能改变的，vue不会对冻结对象做响应式处理；
像不会改变的仅仅用来显示的数据，比如新闻列表，评论列表，文章列表，这些不会改变的对象，可以冻结。
通常对于单个对象不会优化，而对于多个对象才冻结优化;
<template> <div class="container"> <button @click="generateFreeze">freezenBtn</button> <button @click="generateData">Btn</button> <p>{{freezeData.length}}</p> <p>{{data.length}}</p> </div> </template> <script> export default { data() { return { freezeData: [], data: [], }; }, methods: { generateFreeze(){ this.freezeData = Object.freeze(this.getData()); //冻结 }, generateData(){ this.data = this.getData();//不冻结 }, getData(){ const result = [] for (let i = 0; i < 1000000; i++) {//生成百万个数据 result.push({ index:i }) } return result; } }, };
很明显的可以看出来，对于百万数据，freeze数据用时182ms，而对于普通响应式数据，勇士1882ms,差不多是10倍的耗时。
3.使用计算属性：
当多次使用同一个函数时候，因为计算属性对数据暂时存储，依赖条件不变化不会更新，所以性能更好。
4.函数式组件：没有data和生命周期
没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。
使用：1.在template标签上标注functional属性，表示这是个函数组件
2.在引用数据时候，一定要带props.xx；因为没有this，props没法直接挂载在this上。
<template functional> <div class="fun-container"> <ul> <li v-for='item in props.demo' :key='item'> {{item}} </li> </ul> </div> </template> <script> export default { props:['demo'] } </script>
效率上，函数式组件是vue生命周期组件的两倍左右。
5. 保持对象引用的稳定性
vue触发重新渲染的时机是依赖的数据变化；vue判断数据变化的依据是 if(！newVal === val ){ return };发现data里的值是一样的，就不渲染；
例如，app页中有评论数据是一个数组，并将每个评论数据传个comment组件，comment组件的作用是显示一条评论；当提交新评论，有两种方法可以操作用来显示更新：
1.提交完数据后，重新获取全部评论的数据，将全部评论重新赋值；
2.提交完数据后，将返回值添加到全部评论的数组中；
方法1会导致评论数据全部不一样，虽然评论数据仅仅是几条更新，但这些一样的数据是通过字符串转换来的，每次都会生成新数据，也就是会造成每一个comment组件的重新渲染。而方法2不会。
方法2的缺点是：不是实时更新，别人的评论不会立刻传给你。大部分时候，没有必要实时，因为一旦刷新就会获取到实时数据；如果有实时的需求，可以用websocket技术。
组件细分，比如每条评论的组件，可以避免很多情况下的重新渲染。
6.v-show代替v-if
频繁切换状态，内部包含大量子组件。
7. 解决白屏问题
1. <div id='#app'>插入一个载入动画</app>
2. 优化打包，减少提交。
4. 延迟加载，
某页面需要渲染的内容太多，即该页面中组件非常多。页面全部渲染完毕才能显示内容，否则是空白。
8.按需加载，在路由中用（）=> import('xxxx');
------------恢复内容结束------------