vue

你有看过vue推荐的风格指南吗?列举出你知道的几条

发布于 2021-01-11 17:11:44
关注者
0
被浏览
316
4 个回答
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    1、组件名称见名知意,最好加特殊前缀,如:el-Button、el-row等
    2、组件的prop尽可能描述的越详细越好
    3、为组件样式设置scoped作用域
    等等

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    1、使用v-for时记得加key,可以快速定位到需要更新的DOM节点,提高效率。
    2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率
    3、优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    🔗 https://cn.vuejs.org/v2/style-guide/

    1. 优先级A的规则:必要的 (规避错误)
    • 组件名为多个单词
    • 组件数据:组件的 data 必须是一个函数。
    • 细致的 Prop 定义
    • 总是用 :key 配合 v-for
    • 避免 v-ifv-for 用在一起
    • 为组件样式设置作用域
    • 私有属性名:自定义私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

    1. 优先级B的规则:强烈推荐 (增强可读性)
    • 组件文件:只要有能够拼接文件的构建系统,就把每个组件单独分成文件。
    • 单文件组件文件的大小写:要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
    • 基础组件名:应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 BaseAppV
    • 单例组件名:只拥有单个活跃实例(每个页面只使用一次)的组件应该以 The 前缀命名,以示其唯一性。
    • 紧密耦合的组件名:和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
    • 组件名中的单词顺序:组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。
    • 自闭合组件:在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
    • 模版中的组件名大小写:在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
    • JS / JSX 中的组件名大小写:JS/JSX 中的组件名应该始终是 PascalCase 的,在较为简单的应用中只使用 Vue.component 进行全局组件注册时,可以使用 kebab-case 字符串。
    • 完整单词的组件名
    • Prop 名大小写:在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
    • 多个特性的元素:多个特性的元素应该分多行撰写,每个特性一行。
    • 模板中简单的表达式:组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。
    • 简单的计算属性
    • 带引号的特性值:非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。
    • 指令缩写:指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

    1. 优先级C的规则:推荐 (将选择和认知成本最小化)
      https://cn.vuejs.org/v2/style-guide/#%E4%BC%98%E5%85%88%E7%BA%A7-C-%E7%9A%84%E8%A7%84%E5%88%99%EF%BC%9A%E6%8E%A8%E8%8D%90-%E5%B0%86%E9%80%89%E6%8B%A9%E5%92%8C%E8%AE%A4%E7%9F%A5%E6%88%90%E6%9C%AC%E6%9C%80%E5%B0%8F%E5%8C%96
    • 组件 / 实例的选项的顺序
    • 元素特性的顺序
    • 组件 / 实例选项中的空行:在多个属性之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候。
    • 单文件组件的顶级元素的顺序:总是让 <script><template><style> 标签的顺序保持一致。且 <style> 要放在最后,因为另外两个标签至少要有一个。

    1. 优先级D的规则:谨慎使用 (有潜在危险的模式)
    • 没有在 v-if / v-else-if / v-else 中使用 key
    • 元素选择器应该避免在 scoped 中出现。
    • 隐性的父子组件通信:应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。
    • 非 Flux 的全局状态管理:应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。
知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看