本文是对vue官方风格指南的注解,过滤了极少数我认为重要性很低的项目,并将其余项按照作用相关性重新归类,便于读者针对性的选择某一方面进行参考。
(连字符式),因为html对大小写不敏感,无法识别
- kebab-case
(驼峰式)。
- PascalCase
属性的值必须是返回一个对象的函数,如果直接用一个数据对象,则组件的多个实例之间会产生数据污染,导致失去复用价值。
- data
在声明时推荐使用
- Prop
(驼峰式),但在模板中必须使用
- PascalCase
(连字符式),原因同样是因为HTML对大小写不敏感。
- kebab-case
必须配合
- v-for
使用,可以提高部分情况下Vue的渲染性能。
- key
样式中避免使用元素选择器,因为遍历元素的效率通常很低。
- scoped
特性,通用组件可以选择基于class的规则,例如BEM。
- scope
前缀,避免与未来版本的Vue属性冲突,必要时可以再添加一个命名空间,避免与其他插件属性冲突。
- $_
;单例组件用
- Base
前缀标识预示唯一性;耦合组件中的子组件使用父组件名做前缀预示耦合关系,例如
- The
和
- TodoList
;相关组件命名用一般性描述单词开头,用修饰性单词结尾,例如
- TodoListItem
、
- ColorPicker
、
- ColorPickerMulti
。
- ColorPickerQuery
定义应该尽量详细,至少要定义类型,利于开发期间调试和提高组件代码可读性。
- Prop
(连字符式),与组件名写法一致。
- kebab-case
。
- <my-component/>
。
- el,name,parent,functional,delimiters,comments,components,directives,filters,extends,mixins,inheritAttrs,model,props/propsData,data,computed,watch,lifeCircleHooks,methods,template/render,renderError
指南中的绝大多数优化项都是针对代码健壮性和可读性提出的,基本也都是比较普遍的最佳实践方式,对于有一定经验的开发者来说应该都是很熟悉的内容,或者早已形成了自己的一套习惯,如果部分条目与你所熟知的方式相违背,也不需要过于纠结,只要明确了选择背后的利弊,那就是你的“最佳实践”。
来源: https://juejin.im/entry/5a0d3a8a51882527540fdee5