代码风格｜编写Vue项目的合理实践---看看自己都中了几枪

zmheang
751 阅读5分钟

由于自己是半道出家（java转的），所以对于前端代码的一些规范不是很了解，都是看别人的代码是怎样就比葫芦画瓢的写了，也不知道为什么...今天偶尔刷到了原来Vue官方提供了一些编码规则的... 那下面就让我们看看我们编写的代码有多少没有按照规范来： 原文地址

使用vue中的良好编程习惯：

  • 必要的：

    这些规则会帮你规避错误，所以学习并接受他们带来的全部代价吧

  • 强烈推荐

    这些规则能够在绝大多数工程中改善可读性和开发体验

  • 推荐

    当存在多个同样好的选项，选任意一个都可以确保一致性

  • 谨慎使用

    有些vue特性的存在是为了照顾极端情况或者帮助老代码的平稳迁移，不能够被过度使用

  1. 组件名为多个单词---必要

  2. 组件的data必须为一个函数---必要

    当data是一个对象的时候，它会在这个组件的所有实例之间共享

  3. 组件中的prop定义应该尽量详细，至少需要定义其类型---必要

    细致的prop定义有两个好处：

    • 它们写明了组件的API，所以很容易看懂组件的用法
    • 在开发环境下，如果向一个组件提供格式不正确的prop，Vue会报警告，以帮助你捕获潜在的错误来源

  4. 为v-for设置键值---必要

    不然在数组变动更新DOM的时候Vue将会优化渲染吧可能的DOM变更降到最低

  5. 避免v-if和v-for用在一起---必要

    v-for比v-if具有更高的优先级，所以我们可以将数据先进行筛选再渲染

  6. 为组件样式设置作用域---必要

    • scoped
    • CSS Modules
    • BEM

  7. 私有property名---必要

    Vue使用_前缀来定义自身的私有property，所以使用相同的前缀有覆写实例property的风险

  8. 组件文件---强烈推荐

  9. 单文件组件文件的大小写---强烈推荐

    文件名最好始终是单词大写开头，因为对于代码编辑器的自动补全最为友好

  10. 基础组件名---强烈推荐

    这些组件只包括HTM元素、其他基础组件、第三方UI组件库

    这样做的好处是：

    1. 同样性质的组件会排列在一起方便识别
    2. 避免在包裹简单组件时随意选择前缀
    3. 可以放在全局文件夹下，然后使用webpack等工具统一导入

  11. 单例组件名---强烈推荐

    在某一页面只使用一次的组件，而且不接受prop,应该以The前缀命名

  12. 紧密耦合的组件名---强烈推荐

    和父组件紧密耦合的组件应该以父组件名作为前缀

  13. 组件中的单词顺序---强烈推荐

    组件名应该以高级别的单词开头，以描述性的修饰词结尾

    例如SearchButtonClear.vue SettingsCheckboxLaunchOnStartup.vue

  14. 自闭合组件---强烈推荐

    在单文件组件、字符串模板和JSX中没有内容的组件应该是自闭合的

    在DOM模板里要写全

  15. 模板中的组件名的大小写---强烈推荐

    在单文件组件中使用PascalCase，在DOM模板中使用kebab-case

  16. JS/JSX中的组件名大小写---强烈推荐

    组件名应始终是PascalCase

  17. 完整单词的组件名---强烈推荐

  18. Prop名大小写---强烈推荐

    在JavaScript 中更自然的是camelCase,在HTML中更自然的是kebab-case

  19. 多个attribute的元素：分行写

  20. 模板中简单的表达式---强烈推荐

    组件模板中只包含简单的表达式，复杂的表达式应该重构为计算属性或者方法

  21. 简单的计算属性---强烈推荐

    将复杂的计算属性分割为尽可能多的更简单的计算属性

  22. 带引号的attribute值---强烈推荐

    非空的HTML attribute值应该始终带引号，例如<AppSidebar :style="{ width: sidebarWidth + 'px' }">

  23. 指令缩写---强烈推荐

  24. 组件/实例的选项的顺序---推荐

    1. el
    2. name\parent
    3. functional
    4. delimiters\comments
    5. components\directives\filters
    6. extends\mixins
    7. inheriAttrs\model\props(propsData)
    8. data\computed
    9. watch\生命周期钩子
    10. methods
    11. template(render)\renderError

  25. 元素attribute的顺序---推荐

    1. is
    2. v-for
    3. v-if\v-else-if\v-else\v-show\v-cloak
    4. v-pre\v-once
    5. id
    6. ref\key
    7. v-model
    8. v-on
    9. v-html\v-text

  26. 组件/实例选项中的空行---推荐

  27. 单文件组件的顶级元素的顺序---推荐

  28. 没有在v-if/v-else-if/v-else中使用key---谨慎使用

    如果元素类型相同，最好使用key

  29. scoped中的元素选择器---谨慎使用

    元素选择器应避免出现在scoped里（速度慢）

  30. 隐性的父子组件通信---谨慎使用

    优先使用prop和事件进行父子间通信，而不是this.$parent或者变更prop

  31. 非flux的全局状态管理---谨慎使用

    应优先通过Vuex管理全局状态，而不是通过this.$root或者一个全局事件总线

这下终于解开了我许久的疑惑了，哈哈哈哈 以后的编码要按照规范来了，这样对大家都好～～～

avatar
文章
阅读
粉丝