1. 基础规范
- 组件名采用单词连写： 组件名应该是多个单词的组合，且每个单词首字母大写。例如，MyComponent 而不是 my-component。
- 组件文件名： 单文件组件的文件名应该始终使用 PascalCase（大驼峰命名法），例如 MyComponent.vue。
- Prop 定义： 在声明 prop 的时候，应该尽量详细地指定类型，使用对象语法而非字符串数组。
// 不推荐
props: ['status']
// 推荐
props: {
status: String
}
2. 组件选项顺序
组件的选项应该按照一定的顺序排列，以提高代码的可读性。通常的顺序是：
- name
- props
- emits
- setup
- data
- computed
- watch
- methods
- components
- directives
- filters
- beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeUnmount, unmounted
3. 生命周期钩子
生命周期钩子的命名应该始终使用驼峰命名法，并保持一致性。
// 不推荐
beforeMount() {}
// 推荐
beforeMount() {}
4. 指令缩写
Vue 提供了一些常用指令的缩写形式，例如 v-bind 可以用 : 代替，v-on 可以用 @ 代替。在使用时应该根据场景选择合适的缩写形式。
<!-- 不推荐 -->
<div v-bind:class="{ active: isActive }"></div>
<div v-on:click="doSomething"></div>
<!-- 推荐 -->
<div :class="{ active: isActive }"></div>
<div @click="doSomething"></div>
5. 组件中的空格
在组件的模板中，应该遵循一些简单的空格约定，以提高可读性。
<!-- 不推荐 -->
<MyComponent></MyComponent>
<!-- 推荐 -->
<MyComponent />
6. 事件处理
在模板中尽量使用方法而不是内联语句处理事件。
<!-- 不推荐 -->
<button @click="showAlert">Click me</button>
<!-- 推荐 -->
<button @click="handleClick">Click me</button>
这些是 Vue.js 3.0 风格指南中的一些基本建议。详细的指南和规范，请查阅 [Vue.js 3.0 风格指南](https://v3.vuejs.org/style-guide/)。遵循这些规范有助于提高代码质量、可读性，并保持整个项目的一致性。
转载请注明出处：http://www.zyzy.cn/article/detail/583/Vue 3.0