Vue书写风格

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 () {   return {     todos: [       {         id: 1,         text: '学习使用 v-for'       },       {         id: 2,         text: '学习使用 key'       }     ]   } }

 

然后你把它们按照字母顺序排序。在更新 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