1组件名为多个单词(除根组件外)
好处:这样做可以避免跟现有以及未来HTML元素相冲突,所有的HTML元素名称都是 单个单词
例:
Vue.component(‘the-header’,{
//...
})
export default{
name:’TheHeader’
}
2 组件的Data必须是一个函数
好处:当在组件使用data属性的时候(除new Vue外的任何地方),它的值必须是返回一 个对象的函数
例:
exprot default{
data(){
return{
dataList:[‘name’, ’age’]
}
}
}
3 Prop定义应该尽量详细
好处:
1它们写明了组件的API,所以容易看懂组件的用法
2 在开发环境下,如果一个组件格式不正确prop,Vue将会警告,以帮助您你获取 错误信息
例:
props:{
detailData:{
type:Object,
require:true
}
}
4 为v-for设置键值 总是用key配合v-for
在组件上总是必须用key配合v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为。
假设你有一个待办事项列表:
data: function () { |
然后你把它们按照字母顺序排序。在更新 DOM 的时候,Vue 将会优化渲染把可能的 DOM 变动降到最低。即可能删掉第一个待办事项元素,然后把它重新加回到列表的最末尾。
这里的问题在于,不要删除仍然会留在 DOM 中的元素。比如你想使用 <transition-group> 给列表加过渡动画,或想在被渲染元素是 <input> 时保持聚焦。在这些情况下,为每一个项目添加一个唯一的键值 (比如 :key="todo.id") 将会让 Vue 知道如何使行为更容易预测。
根据我们的经验,最好始终添加一个唯一的键值,以便你和你的团队永远不必担心这些极端情况。也在少数对性能有严格要求的情况下,为了避免对象固化,你可以刻意做一些非常规的处理。
5 避免v-if v-for一起使用(永远不要把v-if和v-for同时用在一个元素上)
6为组件样式设置作用域
1对于应用来顶级APP组件和布局组件中的样式可以是全局的,但是其它所有组件都应 该是有作用域的
2尽量不要使用scoped特性,设置作域名也可以通过样式来控制作用域。方便今后整 体更新模块样式
7组件文件(增强可读性)
只要有能够拼接文件的构建系统,就把每个组件单独分成文件
当你需要编辑一个组件或进阅一个组件的用法时,可以更快速度的找到它
8单文件组件文件的大小写
单文件组件的文件名最好要么始终是单词大写开始,要始终是横线链接
例:
DetailPage.vue
detail-page.vue
9 基础组件命名:
应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态的组件)
应该全部以一个特定前缀开头,比如:Base
例:
BaseButton.vue
BaseTable.vue
10单例组件名
只应该拥有单个活跃实例的组件应该以The前缀命名,以示其唯一性
这不意味着组件只用一个单页面,而是每个页面只使用一次,这些组件永完不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应中的上下文 。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。
例:
TheHeading.vue
TheSidebar.vue