Vue最佳实践

来源于：深入浅出Vue.js

1. 为列表渲染设置属性key
2. 在v-if/v-if-else/v-else中使用key
   如果一组v-if+v-else的元素类型相同，最好使用属性key(比如两个
   元素)
3. 路由切换组件不变
   使用vue.js时，页面切换到同一个路由但不同参数的地址时，组件的生命周期钩子并不会重新触发
   例：
   const routes = [ { path: '/detail/:id', name: 'detail', componest: Detail } ]
   当路由从/detail/1切换到/detail/2时，组件是不会发生任何变化的。
   这是因为vue-router会识别出两个路由使用的是同一个组件从而进行复用，并不会重新创建组件，
   因此组件的生命周期钩子自然也不会被触发。
   解决这个问题的三个方法：
   1. 路由导航守卫beforeRouteUpdate （最推荐）
      只需把每次切换路由时需要执行的逻辑放到beforeRouteUpdate守卫中即可。
   2. 观察$route对象的变化
      
      简单粗暴，但非常浪费性能
   3. 为router-view组件添加属性key
   4. 为所有路由统一添加query
   5. 使用全局守卫beforeEach
   6. 使用函数劫持
4. 区分Vuex与props的使用边界
5. 避免v-if和v-for一起使用
   1. 为了过滤一个列表中的项目，比如v-for='user in users' v-if='user.isActive',
      请将users替换为一个计算数属性，比如activeUsers,让他犯规或吕后的列表
   2. 为了避免渲染本应该被隐藏的列表。
      其它省略...