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-ifv-for用在一起
      • 永远不要把上面两个标签用在同一个元素上
      • 还是因为vue自身的机制,会导致多次遍历数组
  • 计算属性
    • 应该尽量把复杂的计算属性分割为尽可能多的更简单的属性
      • 易于测试
      • 易于阅读
      • 更好的拥抱变化
  • CSS作用域
    • 对于应用来说,顶级App组件和布局组件中的样式可以是全局的,但是其他所有组件都应该等会i有作用域的。
      • 在style标签上添加scoped属性,说明它的CSS只作用于当前组件
      • <style scoped>
    • 在有scoped属性时,不要在style标签中出现元素选择器
      • 很慢
  • 空行
    • 当文件过大导致阅读困难时,可以在组件的各个主键间加入空行,方便阅读。
发布了88 篇原创文章 · 获赞 150 · 访问量 56万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览