前端代码规范之Vue

一. 代码结构

<template>
  <div id="my-component">
    <demoComponent/>
  </div>
</template>
<script>
import DemoComponent from '../components/DemoComponent'

export default {
  name: 'MyComponent',
  components: {
    DemoComponent
  },
  mixins: [],
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  destoryed () {},
  methods: {}
}
</script>

<style lang="scss" scoped>
#my-component {}
</style>

二. prop

export default {
    props: {
        status: {
            type: String,
            required: true,
            validator: function (value) {
                return [
                    'syncing',
                    'synced',
                    'version-conflict',
                    'error'
                ].indexOf(value) !== -1
            }
        }
    }
}

三. computed

应该把复杂计算属性分割为尽可能多的更简单的属性。小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时用不着那么多重构了。

// 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.discounetPercent || 0)
  },
  finalPrice: funtion () {
    return this.basePrice - this.discounet
  }
}

四. 为v-for设置键

<ul>
    <li 
        v-for="todo in todos"
        :key="todo.id">
        {{ todo.text }}
    </li>
</ul>

五. v-if和v-for互斥

不要把v-if和v-for同时用在同一个元素上

一般有这样两种情况：

1.为了过滤一个列表中的项目（比如 v-for="user in users"  v-if="user.isActive"）在这种情形下，请将users替换为一个计算属性（比如activeUsers），让其返回过滤后的列表

computed: {
   activeUsers: function () {
     return this.users.filter((user) => {
        return user.isActive
     })
   }
}

<ul>
    <li 
        v-for="user in activeUsers"
        :key="user.id">
        {{ user.name }}
    </li>
</ul>

2. 为了避免渲染本应该被隐藏的列表（比如v-for="user in users" v-if="shouldShowUsers"）。这种情形下，请将v-if移动至容器元素上（比如ul，ol）

<!-- bad -->
<ul>
    <li 
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id">
        {{ user.name }}
    </li>
</ul>

<!--  good -->
<ul v-if="shouldSowUsers">
    <li
        v-for="user in users"
        :key="user.id">
        {{ user.name }}
    </li>
</ul>

六. 多个attribute的元素应该分多行撰写，每个attribute一行

<!--  bad  -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c" />

<!-- good -->
<img 
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo">
<MyComponent
  foo="a"
  bar="b"
  baz="c">

七. 组件模版中应该只包含简单的表达式

复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

// bad
{{
    fullName.split(' ').map((word) => {
        return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
}}

<!-- good -->
{{ normalizedFullName }}

computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

八. 非空的HTML特性值应该始终带双引号

<!-- bad -->
<input type=text>
<AppSidebar :style={width: sidebarWidth + 'px'}>

<!-- good -->
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

九. 指令缩写

用：表示 v-bind:

用 @表示v-on:

用 # 表示v-slot:

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions">

<input
  @input="onInput"
  @focus="onFocus">

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here is some contact info</p>
</template>

十. 单文件组件的标签顺序保持一致

单文件组件应该总是让标签顺序保持为<template>、<script>、<style>

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

十一. 组件之间的通信

参考前一篇文章组件传值的方式（父子组件，兄弟组件，跨级组件）-CSDN博客

十二. 页面跳转数据传递

let id = '123'
this.$router.push({name: 'homeworkinfo', query: {id: id}})

十三. v-if VS v-show

如果运行时，需要非常频繁地切换，推荐使用v-show比较好；如果在运行时，条件很少改变，则推荐使用v-if比较好。