Vue中你需要注意的点

[Jmingzi]

1. 组件的递归调用

例如在树形结构中

// m-tree
<template>
<m-tree>
  <m-tree-node />
</m-tree>
</template>

// m-tree-node
<template>
<div>
  <p>this is tree node</p>
  <!--此处可以直接引用-->
  <m-tree-node v-if="hasChild" />
</div>
</template>

<script>
export default {
  name: 'MTreeNode'
}
</script>

参考Element Tree组件

2. 必要的时候使用jsx

例如在Element UI的Message中，message支持传递vNode，此时的vNode需要手动h

const h = this.$createElement
const message = h('div', { class: 'test' }, [])
// ...

这样写会比较麻烦且阅读不清晰，此时转换成jsx就不一样了。

参考 babel-plugin-transform-vue-jsx

3. 组件/实例的选项应该有统一的顺序

推荐顺序

1. 全局感知
   • name
2. 组件类型
   • functional
3. 模板依赖
   • components
   • directives
   • filters
4. 组合
   • extends
   • mixins
5. 接口
   • model
   • props
6. 本地状态
   • data
   • computed
7. 事件
   • watch
   • 生命周期钩子 (按照它们被调用的顺序)
8. 非响应式的属性
   • methods
9. 渲染
   • template/render
   • renderError

参考 组件/实例的选项的顺序

4. 元素属性的顺序

<div
  :is=""
  v-for=""
  v-if=""
  v-show=""
  ref=""
  key=""
  v-model=""
  v-on=""
  v-html=""
/>

参考 元素特性顺序

5. 组件/实例选项中的空行

// good
props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
},

computed: {
  formattedValue: function () {
    // ...
  },

  inputClasses: function () {
    // ...
  }
}

6. 组件名应该始终是多个单词的，根组件 App 除外。

7. 多个特性的元素换行

但不能为了换行而换行，超过2个或以上时，建议换行

<!--bad-->
<div
  v-if="isShowDiv"
/>

<!--good-->
<div v-if="isShowDiv" />

<!--good-->
<div 
  v-if="isShowDiv"
  ref="myDiv"
  @handle-click="handleClick"
/>

这个规则类似于js换行(超过3个或以上时建议换行)

// bad
import {a, b, c} from Test

// good
import {
  a,
  b,
  c
} from Test