Vue精简版风格概述

【组件选项默认顺序】（推荐）

1、副作用 (触发组件外的影响)

el

2、全局感知 (要求组件以外的知识)

name
parent

3、组件类型 (更改组件的类型)

functional

4、模板修改器 (改变模板的编译方式)

delimiters
comments

5、模板依赖 (模板内使用的资源)

components
directives
filters

6、组合 (向选项里合并属性)

extends
mixins

7、接口 (组件的接口)

inheritAttrs
model
props/propsData

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>								 
 3/5   首页 上一页 1 2 3 4 5 下一页 尾页