vue规范风格指南学习

vue规范-风格指南

1、组件名应该始终是多个单词的

避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

eg. TodoItem

2、组件的 data 必须是一个函数。

data: function () {  
    return {
        foo: 'bar'   
    } 
}

避免共享组件data，让每个组件独立管理自己的数据

3、Prop 定义应该尽量详细。

在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。

props: {
  status: String
}
// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

4、总是用 key 配合 v-for。

5、避免 v-if 和 v-for 用在一起

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

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

6、使用scoped作用域

强烈推荐

把每个组件单独分成文件。

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)

components/
|- MyComponent.vue
components/
|- my-component.vue

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，

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

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

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

推荐优先级B

1、把每个组件单独分成文件

2、单文件组件名称：大写开头或者横线连接

3、和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

4、对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。

Vue.component('MyComponent', {
  // ...
})
Vue.component('my-component', {
  // ...
})
import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}

5、在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

6、传递方法时，都用短横线命名。

7、多个 attribute 的元素应该分多行撰写，每个 attribute 一行。

8、js中驼峰命名会自动转换成横线命名。

9、组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

10、应该把复杂计算属性分割为尽可能多的更简单的 property。

好例子

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

11、指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

12、元素 (包括组件) 的 attribute 应该有统一的顺序。

1. 定义 (提供组件的选项)
   • is
2. 列表渲染 (创建多个变化的相同元素)
   • v-for
3. 条件渲染 (元素是否渲染/显示)
   • v-if
   • v-else-if
   • v-else
   • v-show
   • v-cloak
4. 渲染方式 (改变元素的渲染方式)
   • v-pre
   • v-once
5. 全局感知 (需要超越组件的知识)
   • id
6. 唯一的 attribute (需要唯一值的 attribute)
   • ref
   • key
7. 双向绑定 (把绑定和事件结合起来)
   • v-model
8. 其它 attribute (所有普通的绑定或未绑定的 attribute)
9. 事件 (组件事件监听器)
   • v-on
10. 内容 (覆写元素的内容)
    • v-html
    • v-text

13、一个理想的 Vue 应用是 prop 向下传递，事件向上传递的