笔记

• 为列表渲染设置属性key
• 如果一组v-if/v-if-else/v-else元素类型相同，则使用属性key

理由：
默认情况下，Vue.js会尽可能高效地更新DOM。
这意味着，当它在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除，
然后在同一位置添加一个新元素。
如果本不相同的元素被识别为相同，则会出现意料之外的副作用。

• 动态路由的切换不会触发组件的生命周期

example:
const routes = [ { path: '/users/:id', component: User }, ]
user/1
user/2

解决方法3种：
1、路由导航守卫beforeRouteUpdate
2、观察 $route对象的变化
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 请求个人描述信息
      // 请求列表
    }
  }
}
3、为router-view组件添加属性key
<router-view :key="$route.fullPath"></router-view>

• 不要把v-if和v-for同时用在同一个元素上

理由：
v-for的优先级比v-if高，会先把元素渲染出来，再把元素去掉。

如果硬要设置在同一个元素上，可以通过computed属性，修改列表元素
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

• 为组件样式设置作用域

<style scoped>
</style>

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

// 不好
<style scoped>
div {}
</style>

// 好
<style scoped>
.divEle {}
</style>

// 理由：
大量的元素和特性组合的选择器（比如div[data-v-f3f3eg9]）会比类和特性组合的选择器慢，
所以应该尽可能选用类选择器

• 父子通信只能只用props或者emit
• 组件命名规则

1. 基础组件名（展示类的、无逻辑的、无状态的）以一个特定的前缀开头，比如Base、App或V。这些组件会被频繁使用，所以你可能想把它们放到全局而不是在各处分别导入它们。
2. 单例组件名，这些组件永远不接受任何prop，因为它们是为你的应用定制的。以The前缀命名，以示其唯一性,这类组件通常是页面组件，或者在这个页面中仅使用一次。
3. 紧密耦合的组件名和父组件紧密耦合的子组件应该以父组件名作为前缀命名, 按字母顺序组织文件，这样做可以把相关联的文件排在一起。
4. 完整单词的组件名，组件名应该倾向于完整单词而不是缩写，它带来的明确性却是非常宝贵的.

参考资料

微信读书：深入浅出vue.js