Vue项目中组件如何使用

本章内容为学习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封装于子组件中。