Vue精简版风格指南（推荐）(3)

8、本地状态 (本地的响应式属性)

data
computed

9、事件 (通过响应式事件触发的回调)

watch

生命周期钩子 (按照它们被调用的顺序)

10、非响应式的属性 (不依赖响应系统的实例属性)

methods

11、渲染 (组件输出的声明式描述)

template/render
renderError

prop

【Prop 定义应该尽量详细】（必要）

细致的 prop 定义有两个好处： 1、它们写明了组件的 API，所以很容易看懂组件的用法； 2、在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源

//bad
props: ['status']
//good
props: {
 status: String
}
//better
props: {
 status: {
 type: String,
 required: true
 }
}

【声明prop时，其命名应始终使用camelCase，而在模板和JSX中应始终使用kebab-case】（强烈推荐）

//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {greetingText: String}
<WelcomeMessage greeting-text="hi"/>

指令及特性

【总是用 key 配合 v-for】（必要）

//bad
 <li v-for="todo in todos">
//good
 <li v-for="todo in todos":key="todo.id">

【不要把 v-if 和 v-for 同时用在同一个元素上】（必要）

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

【多个特性的元素应该分多行撰写，每个特性一行】（强烈推荐）

//bad
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
//good
<img
 src="https://vuejs.org/images/logo.png"
 alt="Vue Logo"
>

【元素特性默认顺序】（推荐）

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、唯一的特性 (需要唯一值的特性)

ref
key
slot

7、双向绑定 (把绑定和事件结合起来)

v-model

8、其它特性 (所有普通的绑定或未绑定的特性)

9、事件 (组件事件监听器)

v-on