• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • 优先级 C 的规则:推荐 (将选择和认知成本最小化)

    组件/实例选项的顺序

    组件/实例的选项应该有统一的顺序。这是我们为组件选项推荐的默认顺序。它们被划分为几大类,你能够由此知道新的 property 应该被放到哪里。

    1. 全局感知(要求在组件以外被感知)
      • name
    2. 模板编译选项(改变模板编译的方式)
      • compilerOptions
    3. 模板依赖(模板内使用的资源)
      • components
      • directives
    4. 组合(合并 property 至选项内)
      • extends
      • mixins
      • provide/inject
    5. 接口(组件的接口)
      • inheritAttrs
      • props
      • emits
      • expose
    6. 组合式 API(使用组合式 API 的入口点)
      • setup
    7. 本地状态(本地的响应式 property)
      • data
      • computed
    8. 事件(通过响应式事件触发的回调)
      • watch
      • 生命周期事件(按照它们被调用的顺序)
        • beforeCreate
        • created
        • beforeMount
        • mounted
        • beforeUpdate
        • updated
        • activated
        • deactivated
        • beforeUnmount
        • unmounted
        • errorCaptured
        • renderTracked
        • renderTriggered
    9. 非响应式的 property(不依赖响应性系统的实例 property)
      • methods
    10. 渲染(组件输出的声明式描述)
      • template/render


    元素 attribute 的顺序

    元素(包括组件)的 attribute 应该有统一的顺序。这是我们为组件选项推荐的默认顺序。它们被划分为几大类,你能够由此知道新添加的自定义 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. 唯一性 Attribute(需要唯一值的 attribute)
      • ref
      • key
    7. 双向绑定(结合了绑定与事件)
      • v-model
    8. 其他 Attribute(所有普通的、绑定或未绑定的 attribute)
    9. 事件(组件事件监听器)
      • v-on
    10. 内容(覆写元素的内容)
      • v-html
      • v-text


    组件/实例选项中的空行

    你可能想在多个 property 之间增加一个空行,特别是在这些选项多到一屏放不下,需要滚动才能看完的时候。当你开始觉得组件密集或难以阅读时,在多个 property 之间添加空行可以使其重新变得易于阅读。在一些诸如 Vim 的编辑器里,被这样格式化后的选项还能通过键盘快速导航。

    props: {
      value: {
        type: String,
        required: true
      },
    
      focused: {
        type: Boolean,
        default: false
      },
    
      label: String,
      icon: String
    },
    
    computed: {
      formattedValue() {
        // ...
      },
    
      inputClasses() {
        // ...
      }
    }
    
    // 在组件仍然能够被轻松阅读与定位时
    // 没有空行也挺好
    
    props: {
      value: {
        type: String,
        required: true
      },
      focused: {
        type: Boolean,
        default: false
      },
      label: String,
      icon: String
    },
    computed: {
      formattedValue() {
        // ...
      },
      inputClasses() {
        // ...
      }
    }
    


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

    单文件组件应始终保持<script><template><style>标签的顺序一致。且<style>要放在最后,因为另外两个标签至少会有一个。

    反面例子

    <style>/* ... */</style>
    <script>/* ... */</script>
    <template>...</template>
    
    <!-- ComponentA.vue -->
    <script>/* ... */</script>
    <template>...</template>
    <style>/* ... */</style>
    
    <!-- ComponentB.vue -->
    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>
    

    反面例子

    <!-- ComponentA.vue -->
    <script>/* ... */</script>
    <template>...</template>
    <style>/* ... */</style>
    
    <!-- ComponentB.vue -->
    <script>/* ... */</script>
    <template>...</template>
    <style>/* ... */</style>
    
    <!-- ComponentA.vue -->
    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>
    
    <!-- ComponentB.vue -->
    <template>...</template>
    <script>/* ... */</script>
    <style>/* ... */</style>