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. 为了避免渲染本应该被隐藏的列表。
      其它省略...
posted @ 2021-01-21 11:01  Jeff_blog  阅读(69)  评论(0编辑  收藏  举报