定义组件名称和使用命名约定

在本章及前几章中，我们已经接触并创建了许多组件。随着组件数量的增加，遵循统一的命名规范变得尤为重要。否则难免会出现混淆、错误、无谓争议以及反模式现象。我们的组件之间——甚至与 HTML 元素之间——终将产生命名冲突。值得庆幸的是，Vue 官方提供了风格指南供我们遵循，以提升应用的可读性。本节我们将重点探讨与本书内容密切相关的若干规范。

多词组件名称

由于现有的 HTML 元素均为单字命名（如 article、main、body 等），为避免命名冲突，我们应为组件采用多单词命名（根组件除外）。以下是不规范的命名示例：

// .js 文件
Vue.component('post', { ... })

// .vue 文件
export default {
  name: 'post'
}

规范的组件命名应遵循以下格式：

// .js 文件
Vue.component('post-item', { ... })

// .vue 文件
export default {
  name: 'PostItem'
}

组件数据

在组件中定义数据时，除根 Vue 实例外，我们应当始终使用 data 函数而非 data 属性。以下是错误示范：

// .js 文件
Vue.component('foo-component', {
  data: { ... } // 反模式
})

// .vue 文件
export default {
  data: { ... } // 反模式
}

正确的数据定义方式应为：

// .js 文件
Vue.component('foo-component', {
  data () {
    return { ... } // 返回独立数据对象
  }
})

// .vue 文件
export default {
  data () {
    return { ... }
  }
}

// 根实例例外（.js或.vue文件）
new Vue({
  data: { ... } // 允许直接使用对象
})

原因在于：Vue 初始化数据时，会基于 vm.$options.data 创建数据引用。若使用对象形式定义数据，当组件存在多个实例时，所有实例将共享同一数据对象。修改任一实例的数据都会影响其他实例，这显然不符合预期。

而使用函数形式时，Vue 会通过 getData 方法返回一个全新对象，该对象仅属于当前初始化的实例。根实例的数据则会被所有子组件实例共享（各子组件仍维护自身数据），可通过 this.$root.$data 在任何组件中访问根数据。

具体实现可参考本书 GitHub 仓库中的示例：

/chapter-5/vue/component-webpack/data/
/chapter-5/vue/data/basic.html

你可以查看 Vue 的源代码，了解数据是如何初始化的： https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L112 。

Prop 定义

在定义组件属性时，应当尽可能详细地声明 props 属性，至少需要指定其类型。仅在原型开发阶段可以简化定义。以下是需要避免的写法：

// 不推荐写法
props: ['message']

规范的属性定义应当如下：

// 基础规范写法
props: {
  message: String
}

更完善的声明方式应为：

// 最佳实践写法
props: {
  message: {
    type: String,        // 指定数据类型
    required: false,     // 是否必传
    validator(value) {   // 自定义验证逻辑
      // 验证规则...
    }
  }
}

组件文件

在组件开发中，我们应当严格遵循 "一个文件一个组件" 的原则，即单个文件只包含一个组件。以下是需要避免的反例：

// 不规范的.js文件写法
Vue.component('PostList', { ... })
Vue.component('PostItem', { ... })  // 同一文件包含多个组件

规范的组件组织方式应为：

对于 .js 组件文件

components/
|- PostList.js  // 独立文件
|- PostItem.js  // 独立文件

对于 .vue 单文件组件

components/
|- PostList.vue  // 独立文件
|- PostItem.vue  // 独立文件

单文件组件文件名大小写

在单文件组件命名时，应当严格采用 PascalCase（大驼峰式）或 kebab-case（短横线连接式）命名规范。以下是需要避免的错误示范：

// 不规范的命名方式
components/
|- postitem.vue      // 全小写无分隔（错误）
|- postItem.vue      // 大小写混合无分隔（错误）

规范的组件文件命名应如下：

// PascalCase（推荐用于Vue单文件组件）
components/
|- PostItem.vue      // 大驼峰式

// kebab-case（兼容HTML模板引用）
components/
|- post-item.vue     // 短横线连接式

自闭合组件

在单文件组件中，当组件没有内容时应使用自闭合格式，但在 DOM 模板中除外。以下是需要避免的写法：

<!-- 不规范的.vue文件写法 -->
<PostItem></PostItem>

<!-- 不规范的.html文件写法 -->
<post-item/>

正确的书写方式应为：

<!-- 规范的.vue文件写法 -->
<PostItem/>

<!-- 规范的.html文件写法 -->
<post-item></post-item>

以上只是部分核心规范，完整规范还包括：

多属性元素的书写规则
指令缩写规范
带引号的属性值等

但本节强调的规范已足够完成本书内容。您可以通过 Vue 官方风格指南查看完整规范。