Vue风格指南(A)

优先级A(必要的)

组件名

除了App外,其他组件名应为多单词组成的,因为HTML元素都是单单词的,这样可以避免冲突
例如:
todo-item
TodoItem

组件中的data必须是一个返回一个对象的函数。

因为组件可以有多个实例,不同实例之间数据应该是独立的,如果data是对象,那么所有同一个组件的所有实例的数据都是相同的。不同函数的作用域相互独立,因此只要data由一个函数返回一个对象,就可以实现多个实例的相互独立。

例子:

data: function () {
  return {
    listTitle: '',
    todos: []
  }
}

Prop定义

Prop的定义要尽量详尽,至少指定其类型。

不推荐:

props:['title']

推荐:

props:{
  title: String
}

v-for设置键值

总是用key配合v-for

为组件样式设置作用于

顶级App组件的样式可以是全局的,而其他的组件样式应该要设置作用域。

方法:
scoped、css modules、”BEM约定“或者单纯加上自定义前缀pro-className。

例子:
不推荐:

<template>
  <button class="btn btn-close">X</button>
</template>

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

推荐:

<template>
  <button class="button button-close">X</button>
</template>

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

.button-close {
  background-color: red;
}
</style>
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

私有属性名

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

详解
Vue 使用 _ 前缀来定义其自身的私有属性,所以使用相同的前缀 (比如_update) 有覆写实例属性的风险。即便你检查确认 Vue 当前版本没有用到这个属性名,也不能保证和将来的版本没有冲突。
对于 $ 前缀来说,其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例属性,所以把它用于_私有_属性并不合适。
不过,我们推荐把这两个前缀结合为 $_,作为一个用户定义的私有属性的约定,以确保不会和 Vue 自身相冲突。

不推荐:
updata: function(){}
_updata: function(){}
$updata: function(){}

推荐:
$_nameSpace_updata: function(){}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。