Vue.js代码风格-笔记

Vue.js代码风格-笔记

组件

组件命名

• 组件名为多个单词
• 主要能够拼接文件的构建系统，就把每个组件单独分成文件
• 组件文件名单词开头始终大写
• 基础组件应该全部以特定的前缀开头（Base,App,V）
• 只拥有单个活跃实例的组件应该以The命名前缀，以示唯一性
• 与父组件紧耦合的组件应该以父组件名为前缀
  
  • SearchSidebar.vue
  • SearchSidebarNavigation.vue
• 组件名应该以该以高级别的（通常是一般化描述的）单词开头，描述性的修饰词结尾
  
  • SearchButtonClear.vue
  • SearchButtonRun.vue
  • SearchInputQuery.vue
  • SearchInputExcludeGlob.vue
  • SettingsCheckboxTerms.vue
• 组件名应该倾向于完整的单词而不是缩写
  
  • SdSettings.vue （NO）
  • StudentDashboardSettings.vue (YES)

使用组件

• 在单文件组件、字符串模板和jsx中没有内容的组件应该自闭和的。
  
  • 但是在 模板中不要这样
• 在模板中，组件名的大小写
  
  • 对于大多数项目来说，单文件组件和字符串模板中的组件名应该总是PascalCase
  • 但是在 模板中总是kebab-case
  • <my-component></my-component>
• JS/JSX 中的组件名应该始终是PascalCase

---

排序

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

• <template>...</template>
• <script>/* ... */</script>
• <style>/* ... */</style>

主要是每个文件中的顺序要相同，不要有区别。

组件/实例的选项的顺序

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

元素特性的顺序

元素（包括组件）的特性应该有统一的顺序

• 定义
  
  • is
• 列表渲染
  
  • v-for
• 条件渲染
  
  • v-if
  • v-else-if
  • v-else
  • v-show
  • v-cloak
• 渲染方式
  
  • v-pre
  • v-once
• 全局感知
  
  • id
• 唯一的特性
  
  • ref
  • key
  • slot
• 双向绑定
  
  • v-model
• 其他特性
• 事件
  
  • v-on
• 内容
  
  • v-html
  • v-text

---

模板

• 模板中的组件名应该为kebab-case格式
  
  • <my-component></my-component>
• Prop名：
  
  • 在声明Prop时使用camelCase形式
  • 在模板中使用时使用kebab-case形式
  • props: {greetingText: String}
  • <WelcomeMessage greeting-text="hi"/>
• 多个特性的元素
  
  • 对于多个特性的元素应该分行每个特性单独一行
• 模板中的表达式
  
  • 模板中只应该包含简单的表达式
  • 复杂的表达式则应该重构为计算属性或方法
    
    • 复杂的表达式会让你的模板边的不那么声明式。
    • 我们应该尽量描述该出现什么而不是如何出现
• 带引号的特征值
  
  • 非空HTML特征值应该始终带引号。
  • 单引号或双引号，选择你在JS中不用的那个。
  • <input type="text">
• 指令缩写
  
  • 指令缩写应该要么都用，要么不用。

---

其他

• data属性要返回一个对象函数
  
  • 为了防止重用组件时，data部分相互篡改
  • 变为函数后，每次使用只维护自己的数据
• Prop
  
  • Prop定义应尽量详细
    
    • 写明了组件的api
    • 在开发环境下方便调试
  • Prop名的大小写
    
    • 在声明prop时，其命名应该始终使用camelCase
    • 而模板和JSX中始终使用kebab-case
• v-for标签
  
  • 总是用key维护v-for
    
    • 防止vue的优化出错
  • 避免v-if和v-for用在一起
    
    • 永远不要把上面两个标签用在同一个元素上
    • 还是因为vue自身的机制，会导致多次遍历数组
• 计算属性
  
  • 应该尽量把复杂的计算属性分割为尽可能多的更简单的属性
    
    • 易于测试
    • 易于阅读
    • 更好的拥抱变化
• CSS作用域
  
  • 对于应用来说，顶级App组件和布局组件中的样式可以是全局的，但是其他所有组件都应该等会i有作用域的。
    
    • 在style标签上添加scoped属性，说明它的CSS只作用于当前组件
    • <style scoped>
  • 在有scoped属性时，不要在style标签中出现元素选择器
    
    • 很慢
• 空行
  
  • 当文件过大导致阅读困难时，可以在组件的各个主键间加入空行，方便阅读。