Vue风格指南

闲来无事看了下Vue风格指南，才发现自己以前有好多写法或者用法上的错误，在这里记录下平时没有注意到或者不知道的一些东西，本文全部摘自Vue官方文档

1.组件名应为多个单词，防止与HTML发生冲突

Vue.component('todo-item', {

})

2.组件中的data必须是一个函数，防止在组件复用的时候数据变动产生关联

export default {
    data () {
        return {

        }
    }
}

3.prop的定义尽量详细

export default {
    props: {
        status: String
    }
    // 或者
    props: {
        status: {
            type: String,
            required: true
        }
    }
}

4.元素选择器应该避免在 scoped 中出现，为了给样式设置作用域，Vue 会为元素添加一个独一无二的特性，例如 data-v-f3f3eg9。然后修改选择器，使得在匹配选择器的元素中，只有带这个特性才会真正生效 (比如 button[data-v-f3f3eg9])。

问题在于大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和特性组合的选择器 慢，所以应该尽可能选用类选择器

反例：
<template>
    <button></button>
</template>
<style scoped>
    button {

    }
</style>

正例：
<template>
    <button class="click-btn"></button>
</template>

<style scoped>
    .click-btn {

}
</style>

5.相同的元素之间使用v-if v-if-else v-else时要添加key：默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的副作用。

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

<p v-if="error">
  错误：{{ error }}
</p>
<div v-else>
  {{ results }}
</div>

 

6.props命名：在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

反例：

props: {
  'greeting-text': String
}

<WelcomeMessage greetingText="hi"/>

正l例：

props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>