Vue精简版风格概述

}).join(' ')
}
}

【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

//bad
computed: {
 price: function () {
  var basePrice = this.manufactureCost / (1 - this.profitMargin)
  return (
   basePrice -
   basePrice * (this.discountPercent || 0)
  )
 }
}
//good
computed: {
 basePrice: function () {
  return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
  return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
  return this.basePrice - this.discount
 }
}

【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

//good
props: {
 value: {
  type: String,
  required: true
 },
 focused: {
  type: Boolean,
  default: false
 }
}

谨慎使用

1、元素选择器应该避免在 scoped 中出现

在 

scoped

 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

//bad
<style scoped>
button {
 background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
 background-color: red;
}
</style>

2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 

this.$parent

 或改变 prop

3、应该优先通过 Vuex 管理全局状态，而不是通过 

this.$root

 或一个全局事件总线

4、如果一组 

v-if

 + 

v-else

 的元素类型相同，最好使用 

key

 (比如两个 

<div>

 元素)

//bad
<div v-if="error">
 错误：{{ error }}
</div>
<div v-else>
 {{ results }}
</div>
//good
<div
 v-if="error"
 key="search-status"
>
 错误：{{ error }}
</div>
<div
 v-else
 key="search-results"
>
 {{ results }}
</div>