本章内容为学习vue官方文档中对于组件使用的规范，以及在实际项目中应用组件的经验总结。
阅读链接??风格指南 — Vue.js
一、阅读Vue官网总结
①组件名为多个单词
组件名称应该始终是多个单词，尽量以两个单词为最好，根组件App这类除外。
export default {
name：'TodoItem'
}*好处：可以避免跟现有的以及未来的HTML元素发生冲突，因为所有的HTML元素名称都是单个单词的。
②避免v-if和v-for用在一起
v-for比v-if具有更高的优先级
场景一、为了过滤列表中的某项（v-if 的条件为v-for遍历后的某项值时）
<div v-for="user in userList" v-if="user.title">{{ user.name }}</div>
底层代码执行逻辑如下：
this.userList.map(item => {
if(item.title) {
return item.name
}
})
哪怕只想渲染出一小部分元素，也得在每次重新渲染的时候遍历整个列表。
在这种情况下，最好的做法是将 userList 替换为计算属性，比如activeUsers，让其返回过滤后的列表
<div v-for="user in activeUsers">{{ user.name }}</div>
computed: {
activeUsers() {
return this.userList.filter(item => {
return item.title
})
}
}
好处：1、过滤后的列表只会在userList数组发生相关变化时才被重新计算，过滤更高效。
2、使用v-for="user in activeUsers" 之后，在渲染的时候只遍历活跃用户，渲染更高效。
3、解耦渲染层的逻辑，可维护性更强，对逻辑的更改和扩展更强。场景二、为了避免渲染本应该被隐藏的列表（v-if 的条件不为v-for中的某项）
<div v-for="user in userList" v-if="shouldShowUser"></div>
更好的写法：
<div v-if="shouldShowUser">
<div v-for="user in userList"></div>
</div>
好处：通过将v-if 移动到容器元素，不会再对列表中的每个元素检查shouldShowUser。
取而代之的是，只会检查一次，且不会在shouldShowUser为否的时候运算v-for③单文件组件文件名的大小写?
单文件组件（单文件组件的文件名应该始终是单词大写开头，要么始终是横线连接。）
好的例子：
components/
|- MyComponent.vue
|- my-component.vue基础组件名（这些组件为你的应用奠定了一致的基础样式和行为）
好的例子：
|- VButton.vue
|- VTable.vue
|- VIcon.vue紧密耦合的组件名（和父组件紧密耦合的子组件应该以父组件名作为前缀命名）
好的例子：
|- TodeList.vue
|- TodeListItem.vue
|- TodeListItmeButton.vue
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue反例：
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue二、实际项目中应用组件总结
实际项目中组件的使用，以后台管理系统中列表为例，主页面为index.vue页面，该页面包含检索框，下方为列表项。列表项操作栏有若干功能按钮。此时，index.vue页面应作为父组件，其他操作每一个功能模块作为子组件进行引入。
如果子组件是需要弹出的dialog框，则将el-dialog封装于子组件中。
