vue 官方风格指南解析

Vue 有个官方的风格指南，我从中摘抄了些认为比较重要、自己常忽略的点，加上一些分析列出来。也可以直接去观看风格指南： https://cn.vuejs.org/v2/style...

单文件组件文件的命名

文件名要么是单词开头大写，要么是横线连接

MyComponent.vue 或 my-component.vue

为组件样式设置作用域

除了根组件或者布局组件，都要加上 scoped 设置作用域，避免影响其它地方的样式

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

如果要过滤列表，使其隐藏不符合条件的项目，可以使用计算属性，预先筛选出符合条件的数组

反例：

xx


正确例子：

xx

computed: {
    activeUsers () {
        return this.users.filter((item) => {
            return item.isActive
        })
    }
}

好处：

*   过滤后的列表只会在`users`数组发生相关变化时才被重新运算，过滤更高效。
*   使用`v-for="user in activeUsers"`之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
*   解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

如果希望控制列表显示，将 v-if 移到外层容器元素上

 反例：
 
 
     
 
 
 
 正确例子
 
     
 
 
 好处：
 
 *   如上
 *   通过将 v-if 移动到容器元素，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

Prop 定义

prop 尽量详细，不使用数组方式，而是用对象列出更多选项，至少需要指定其类型。

好处：

它们写明了组件的 API，所以很容易看懂组件的用法；
在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

Prop 名格式

prop 应当使用驼峰命名法，而在模板和 JSX 中使用时，要用横线连接（HTML 的约定）

正确例子：



props: {
  greetingText: String
}

组件名为多个单词

组件名始终应该是多个单词，避免和将来的 HTML 元素相冲突，例如

export default {
    // name: 'Todo'，不推荐
    name: 'TodoItem'
}

基础组件名

对于不包含全局状态的（比如 vuex store)、展示类的、无逻辑或无状态的基础组件，例如 table、button、icon 等，应该都以一个特定的前缀开头，统一风格且与其他功能组件区分开来

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue


正确例子：

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

单例组件名

反例：

components/
|- Heading.vue
|- MySidebar.vue

正确例子：

components/
|- TheHeading.vue
|- TheSidebar.vue

紧密耦合的组件名

对于和父组件紧密耦合的子组件（即只在指定的父组件里用到的），命名方式应该规范统一：父组件名+本身名字，因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

注意：这里的父组件也是自定义组件，例如自定义列表组件，其还有只在其本身使用的自定义列表 item 子组件、自定义按钮子组件，子组件命名要规范

现在通常做法（components 的父组件使用文件夹形式，包含 index.vue 和子组件文件夹）：

components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue

或者单纯是命名上相似：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

正确例子：

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

自闭合组件

对于没有内容的组件，在允许的情况下要使用自闭合形式，以提醒使用者它们不仅没有内容，而且是刻意没有内容，且代码也更简洁。

允许的情况：单文件组件、字符串模板、JSX
不允许的情况：DOM 模板（一些 HTML 元素中，例如
、
、和