组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象。
组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，data可以就一份。Vue 组件间通信有哪几种方式
（1）props / $emit 父子组件通信
（2）ref 与 $parent / $children 父子组件通信，直接调用组件上的方法
（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信 创建一个Vue 实例作为EventBus
（4）$attrs / $listeners 适用于 隔代组件通信 $attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。$listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。参考：[https://cn.vuejs.org/v2/guide/components-custom-events.html](https://cn.vuejs.org/v2/guide/components-custom-events.html)
通过 v-bind="$attrs" v-on="$listeners" 将父组件的属性和监听传递给子组件
provide / inject 适用于 隔代组件通信
（5）provide / inject 适用于 隔代组件通信 参考：[https://cn.vuejs.org/v2/api/#provide-inject](https://cn.vuejs.org/v2/api/#provide-inject)
（6）Vuex 适用于 父子、隔代、兄弟组件通信
- 永远不要把 v-if 和 v-for 同时用在同一个元素上。因为v-for优先级别v-if高
为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。
- 代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染 （保证首屏加载速度）
- Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
- 基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈
参考
作者：Vicky丶Amor
链接：https://www.jianshu.com/p/b1564296a78b
v-for循环渲染key的作用
参考一个小例子：https://blog.csdn.net/xukongjing1/article/details/81587549
注意html里同一层级下标签，的key属性值不能相同，因为会被提取到vnode作为key属性。
v-for如果不指定key, 每次update的时候，列表项vnode会自动添加key，key的值是固定前缀+列表index
vue 在patch的时候，会对比vnode树上同样节点上的新旧节点是否是同样类型的节点（首先就比较key是否相等，然后标签名等），如果相同的话对应的dom元素拿里复用，这样就减少了新建dom元素的浏览器渲染开销。
