编码优化

1. 不要将所有的数据都放到 data 中，data 中的数据都会增加 getter 和 setter，又会收集watcher，这样还占内存。不需要响应式的数据我们可以定义在实例上。

<template><div class="hello"><ul><li v-for="(item, index) in list" :key="index">{{ item }}</li></ul></div>
</template><script>
export default {data () {return {list: [1, 2, 3, 4, 5]}}
}
</script>

代码可以优化成这样子：

<template><div class="hello"><ul><li v-for="(item, index) in list" :key="index">{{ item }}</li></ul></div>
</template><script>
export default {created () {this.list = [1, 2, 3, 4, 5]}
}
</script>

2. 在 v-for 绑定事件的时候可以使用事件代理，将事件绑定到外层元素上。

<template><div class="hello"><ul><li v-for="(item, index) in list" :key="index" @click="todo">{{ item }}</li></ul></div>
</template>

代码可以优化成这样子：

<template><div class="hello"><ul @click="todo"><li v-for="(item, index) in list" :key="index">{{ item }}</li></ul></div>
</template>

3. 使用 keep-alive 缓存组件，防止组件来回的创建和销毁这样浪费性能。

<transition><keep-alive><router-view></router-view></keep-alive>
</transition>

4. 拆分组件，增加代码的复用性，减少不必要的渲染。

5. 使用 v-show 代替 v-if 指令。

6. key 最好保证唯一性，提高 DOM-diff 的复用性能。

7. 合理的使用路由懒加载，异步组件。

const router = new VueRouter({routes: [{ path: '/foo', component: () => import('./Foo.vue') }]
})

8 数据持久化，本地存储，localStorage，sessionStorage。

加载优化

1. 第三方模块按需加载，比如 element-ui 的按需加载，根据需要仅引入部分组件。

import { Button } from 'element-ui';

2. 图片的懒加载，可以使用 vue-lazyload 库。

用户体验

1.骨架屏2.pwa 使用的 H5 的离线缓存

SEO优化

1.预渲染插件 prerender-spa-plugin2.服务端渲染

打包优化

1.使用 cdn 加载第三方模块2.多线程打包 happypack3.splitChunks 抽离公共文件4.sourceMap 生成源码映射5.压缩和缓存6.  阅读《vue性能优化》了解更多