美文网首页
vue代码规范

vue代码规范

作者: 微笑是我_f8bb | 来源:发表于2020-05-25 12:11 被阅读0次

非原创，转公司的，觉得很不错想保存下来，侵权删

组件名为多个单词

组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}</pre>

* * *

组件数据

组件的 data 必须是一个函数。 [为什么]
当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})

export default {
  data: {
    foo: 'bar'
  }
}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
  data: {
    foo: 'bar'
  }
})</pre>

* * *

Prop定义

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

详解
细致的 prop 定义有两个好处：

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

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 这样做只有开发原型系统时可以接受
props: ['status']</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">props: {
  status: String
}

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

* * *

为 v-for 设置键值

总是用 key 配合 v-for [为什么]
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul></pre>

* * *

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

永远不要把 v-if 和 v-for 同时用在同一个元素上。 [为什么]
一般我们在两种常见的情况下会倾向于这样做：

  • 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
  • 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

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

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

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

为组件样式设置作用域

对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。
这条规则只和单文件组件有关。这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><template>
  <button class="btn btn-close">X</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style></pre>

* * *

私有 property 名

使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 _ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如yourPluginName)。**
这个约束主要是针对在使用插件及混入功能时，如果没有涉及请忽略。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    _update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $_update: function () {
      // ...
    }
  }
}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

// 甚至更好！
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin</pre>

* * *

组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue</pre>

* * *

单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)
单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- mycomponent.vue

components/
|- myComponent.vue</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- MyComponent.vue</pre>

* * *

基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀（Win）开头
基础组件特定的前缀可以避免与三方组件冲突，也方便辨别哪些是自己的组件。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- WinButton.vue
|- WinTable.vue
|- WinIcon.vue</pre>

* * *

单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- Heading.vue
|- MySidebar.vue</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- TheHeading.vue
|- TheSidebar.vue</pre>

* * *

紧密耦合的组件名

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

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue</pre>

* * *

组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue</pre>

* * *

方法命名的单词顺序

** 方法命名应该统一以 动词+名词的形式定义，不应该使用一个单词进行命名，因为不便于描述方法的用途**

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function click(){
  // do something
}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function clickTreeNode(){
  // do something
}</pre>

* * *

自闭合组件

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。

不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>

<!-- 在 DOM 模板中 -->
<my-component/></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component></pre>

* * *

模板中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
PascalCase 相比 kebab-case 有一些优势：

  • 编辑器可以在模板里自动补全组件名，因为 PascalCase 同样适用于 JavaScript。
  • 视觉上比 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。
  • 如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。 不幸的是，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!-- 在单文件组件和字符串模板中 -->
<mycomponent/>

<!-- 在单文件组件和字符串模板中 -->
<myComponent/>

<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component></pre>

* * *

JS/JSX 中的组件名大小写

JS/JSX 中的组件名应该始终是 PascalCase 的.

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent',
  // ...
}

export default {
  name: 'my-component',
  // ...
}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('MyComponent', {
  // ...
})

Vue.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
  // ...
}</pre>

* * *

完整单词的组件名

组件名应该倾向于完整单词而不是缩写。
编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- SdSettings.vue
|- UProfOpts.vue</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue</pre>

* * *

Prop 名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">props: {
  'greeting-text': String
}

<WelcomeMessage greetingText="hi"/></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/></pre>

模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}</pre>

简单的计算属性

应该把复杂计算属性分割为尽可能多的更简单的 property。 [为什么]

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}</pre>

* * *

带引号的 attribute 值

非空 HTML attribute 值应该始终带双引号

在 HTML 中不带空格的 attribute 值是可以没有引号的，但这鼓励了大家在特征值里不写空格，导致可读性变差。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }"></pre>

* * *

指令缩写

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

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-on:input="onInput"
  @focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template></pre>

* * *

组件/实例的选项的顺序

组件/实例的选项应该有统一的顺序。

这是公司的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

  1. 副作用 (触发组件外的影响)
    • el
  2. 全局感知 (要求组件以外的知识)
    • name
    • parent
  3. 组件类型 (更改组件的类型)
    • functional
  4. 模板修改器 (改变模板的编译方式)
    • delimiters
    • comments
  5. 模板依赖 (模板内使用的资源)
    • components
    • directives
    • filters
  6. 组合 (向选项里合并 property)
    • extends
    • mixins
  7. 接口 (组件的接口)
    • inheritAttrs
    • model
    • props/propsData
  8. 本地状态 (本地的响应式 property)
    • data
    • computed
  9. 事件 (通过响应式事件触发的回调)
    • watch
    • 生命周期钩子 (按照它们被调用的顺序)
    • · beforeCreate
    • · created
    • · beforeMount
    • · mounted
    • · beforeUpdate
    • · updated
    • · activated
    • · deactivated
    • · beforeDestroy
    • · destroyed
  10. 非响应式的 property (不依赖响应系统的实例 property)
*   methods
  1. 渲染 (组件输出的声明式描述)
*   template/render
*   renderError

元素 attribute 的顺序

元素 (包括组件) 的 attribute 应该有统一的顺序。
这是组件选项的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 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

组件/实例选项中的空行

在多个 property 之间增加一个空行。
当你的组件开始觉得密集或难以阅读时，在多个 property 之间添加空行可以让其变得容易。在一些诸如 Vim 的编辑器里，这样格式化后的选项还能通过键盘被快速导航。

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
},

computed: {
  formattedValue: function () {
    // ...
  },

  inputClasses: function () {
    // ...
  }
}</pre>

* * *

单文件组件的顶级元素的顺序

单文件组件定级元素顺序应该总是让、、

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>

<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style></pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!-- ComponentA.vue -->
<style>/* ... */</style>
<template>...</template>
<script>/* ... */</script>

<!-- ComponentB.vue -->
<style>/* ... */</style>
<template>...</template>
<script>/* ... */</script></pre>

* * *

隐性的父子组件通信

**应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.parent 或变更 prop。** 一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。遵循这一约定会让你的组件更易于理解。然而，在一些边界情况下 prop 的变更或 this.parent 能够简化两个深度耦合的组件。

问题在于，这种做法在很多简单的场景下可能会更方便。但请当心，不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。

反例

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: '<input v-model="todo.text">'
})

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    removeTodo () {
      var vm = this
      vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
        return todo.id !== vm.todo.id
      })
    }
  },
  template: `
    <span>
      {{ todo.text }}
      <button @click="removeTodo">
        X
      </button>
    </span>
  `
})</pre>

好例子

<pre class="addPadding" style="font-family: Consolas, Menlo, &quot;Liberation Mono&quot;, Courier, monospace; border-radius: 3px; display: block; padding: 6px 10px; margin: 1em 1em 1em 1.6em; background-color: rgb(250, 250, 250); border: 1px solid rgb(226, 226, 226); width: auto; overflow: auto hidden; color: rgb(51, 51, 51); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <input
      :value="todo.text"
      @input="$emit('input', $event.target.value)"
    >
  `
})

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <span>
      {{ todo.text }}
      <button @click="$emit('delete')">
        X
      </button>
    </span>
  `
})</pre>

相关文章

  • Vue.js 组件编码规范

    Vue.js 组件编码规范 目标 本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特...

  • VUE代码规范

    标准

  • Vue 代码规范

    1.Vue 组件命名 有意义的: 不过于具体，也不过于抽象 简短: 2 到 3 个单词 具有可读性: 以便于沟通交...

  • vue代码规范

    非原创，转公司的，觉得很不错想保存下来，侵权删 组件名为多个单词 组件名应该始终是多个单词的，根组件 App 以及...

  • vue代码规范

    1，vue文件命名：主文件以 XxxIndex.vue 命名，开头首字母大写；弹窗增删改查组件XxxDialog....

  • Vue项目代码规范

    一、UI框架及css预处理器选择 1、PC端Vue项目UI框架：ElementUI（优先）、iView2、移动端V...

  • vue开发规范梳理

    为了前端代码形成统一的风格，制定该代码规范（该规范部分参照VUE官网介绍的风格指南以及常用的规范） 1.文件夹命名...

  • VUE项目规范

    一简介 此规范基于脚手架vue-cli3.+ 从编写IDE,到项目结构,命名规范,代码风格,包括代码逻辑等,都做了...

  • 编程的习惯

    阿里巴巴出品的java规范JavaScript代码规范VUE编写规范 子日：少成若天性，习惯如自然。 我每次学习一...

  • vetur+prettier+eslint 实现vue代码格式化

    前端vue代码用eslint做了代码格式校验，规范用的这个http://alloyteam.github.io/C...

网友评论

      本文标题：vue代码规范

      本文链接：https://www.haomeiwen.com/subject/pmfyahtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|vue代码规范|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！