Vue的性能优化

Vue 是一套用于构建用户界面的渐进式的 JavaScript 框架。具有体积小，更高的运行效率，双向数据绑定，生态丰富、学习成本低等优点，所以 Vue 也被广泛用在移动端跨平台框架上。Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM，但是我们仍然需要去关注 Vue 在跨平台项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。
Vue.js官网

1. v-for遍历必须为每个item添加key，并且避免在v-for中使用v-if

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。我们在使用的使用经常会使用 index(即数组的下标)来作为 key,但其实这是不推荐的一种使用方法，因为在当index改变时，Vue比对时会更新多余的数据，应该使用每个item唯一的key值。

v-for 遍历避免同时使用 v-if，v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

2. 阻止数据劫持

Vue通过Object.defineProperty对data数据进行劫持，实现数据的双向响应。但有的场景需要我们的数据一旦获取后不做任何的改变，避免错误的刷新，此时可以通过
Object.freeze(obj)冻结对象，一旦“冻结”后的对象就再也不能修改了。冻结的对象是锁定下来的终极形式。一旦对象 被冻结，它就不能被解冻，也不能以任何方式被篡改。
Object.freeze() MDN Web Docs

3. Vue组件中的data返回一个函数而非是一个对象

如果data是一个对象，那么所有的实例就会共享该对象，无论在哪个组件实例中修改data，都会影响到所有的组件，如官网示例：

4. 并不需要将所有的数据都放在data中

因为data中的数据Vue会增加getter和setter，并且收集watcher，占了内存。不需要响应式的数据可以定义在实例之上。

<template>
	<ul>
		<li v-for="(item,index) in myArr" :key="index">
			my list{{item}}
		</li>
	</ul>
</template>
// *** ignore ***
data(){
	return {
		myArr:[1,2,3,4]
		}
}
// 优化为
created(){
	this.myArr=[1,2,3,4]
	}

5. v-for元素通过事件代理绑定到父元素上

不需要说明