1.为列表渲染设置属性key

key这个特殊属性主要用于Vue.js的虚拟DOM算法中，在对比新旧虚拟节点时辨识虚拟节点。
在更新子节点时，需要从旧虚拟节点列表中查找与新虚拟节点相同的节点进行更新。如果这个查找过程设置了key，那么查找速度会快很多，所以尽可能在使用v-for的时候提供key属性，可以获取性能上的提升。

2.在v-if/v-if-else/v-else 中使用key

如果一组v-if+v-else的元素类型相同，最好使用属性key

3.路由切换组件不变

当页面切换到同一个路由但不同参数的地址时，组件的生命周期钩子不会重新触发。
例如从路由/detail/1 切换到 /detail/2的时候，vue-router会识别两个路由用的是同一个组件从而进行复用，并不会重新创建组件，所以组件上的生命周期钩子就不会被触发。
如果想要触发，可以有三个解决办法。

3.1 路由导航守卫beforeRouteUpdate

vue-router提供了路由导航守卫beforeRouteUpdate，该守卫在当前路由改变且组件被复用时调用，所以可以在组件内定义守卫来解决为题，组件的生命周期钩子不会被重新触发，但是这个守卫可以被触发，只需要把每次切换路由需要执行的逻辑放在守卫中即可，在守卫中发送请求拉取数据，更新状态后并重新渲染视图。

3.2 观察$route对象的变化

通过watch可以监听到路由对象发生的变化，从而对路由变化做出响应。推荐此时只观察自己需要的query，有利于减少不必要的请求。

3.3为router-view组件添加属性key

本质上利用虚拟DOM在渲染时通过key来对比两个节点是否相同的原理，通过给router-view组件设置key，每次切换路由的时候key都不一样，让虚拟DOM认为这是一个新的节点，从而先销毁原组件，然后重新创建新组件。即使是相同的组件，路由变化时也会重新创建。但是这个方法非常浪费性能，但是优点就是更明显简单。

4.为所有路由统一添加query

有些路由上的query是要从上游链路上传下来的，在应用的任何路由中都需要携带，在所有跳转路由的地方都需要设置一遍非常麻烦，理想状态在全局统一配置一个基础的query，在全局都能使用，在切换路由时不需要做任何处理。但是vue-router没有提供相应的api，但是有两种方法可以解决问题：

4.1 使用全局守卫beforeEach

解决办法是在beforeEach中判断这个全局添加的参数在路由对象中是否存在，存在，则不开启新导航，优点是可以全局统一配置公共的query参数，并且在组件内切换路由时无需进行特殊处理。缺点是每次切换路由时，全局守卫beforeEach会触发两次。

4.2 使用函数劫持完美解决问题

通过修改内部方法实现目的，也不是很推荐。。。

5.区分Vuex 与 props的使用边界

项目开发中，业务组件会使用Vuex维护状态，使用不同组件统一操作Vuex中的状态，不论是父子组件间通信还是兄弟组件间通信都很容易。
通用组件，使用props以及事件进行父子组件间的通信，通用组件会拿到各个业务组件中使用，要与业务解耦，所以需要使用props获取状态

6.避免v-if和v-for一起使用。

7.为组件样式设置作用域

8.避免在scoped中使用元素选择器

9.避免隐性的父子组件通信

优先通过prop和事件进行父子组件之间的通信，而不是使用this.$parent或改变prop。
理想应用是通过prop向下传递，通过事件向上传递。