常用属性的顺序

export default {name:'component', // 组件名components:{}, // 子组件directives:{}, // 自定义指令filters:{}, // 过滤器mixins:{}, // 混入model:{}, // 定义v-modelprops:{}, // 父组件传递的propdata() {return {} // 本地状态},computed:{}, // 计算属性watch:{}, // 监听器created(){}, // 创建时的钩子mounted() {}, // 挂载时的钩子beforeDestroy(){}, // 销毁前的钩子methods: {}, // 方法render(h) {}, // 渲染函数
}

标签常用属性顺序

1. v-for
2. v-if、v-else、v-show
3. id
4. ref、key
5. v-model
6. 其他属性
7. 事件
8. v-html

<template><div class="wrapper"><template v-for="(item, index) in items"><the-childv-if="show"id="0"ref="child":key="index"v-model="form.name":floor="floor"@input="handler"v-html="dom"></the-child></template></div>
</template>

组件/实例的选项应该有统一的顺序。

这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

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

el

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

name
parent

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

functional

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

delimiters
comments

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

components
directives
filters

组合 (向选项里合并 property)

extends
mixins

接口 (组件的接口)

inheritAttrs
model
props/propsData

本地状态 (本地的响应式 property)

data
computed

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

watch
生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

非响应式的 property (不依赖响应系统的实例 property)

methods

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

template/render
renderError

元素 attribute 的顺序推荐

元素 (包括组件) 的 attribute 应该有统一的顺序。
这是我们为组件选项推荐的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。

定义 (提供组件的选项)

is

列表渲染 (创建多个变化的相同元素)

v-for

条件渲染 (元素是否渲染/显示)

v-if
v-else-if
v-else
v-show
v-cloak

渲染方式 (改变元素的渲染方式)

v-pre
v-once

全局感知 (需要超越组件的知识)

id

唯一的 attribute (需要唯一值的 attribute)

ref
key

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

v-model

其它 attribute (所有普通的绑定或未绑定的 attribute)

事件 (组件事件监听器)

v-on

内容 (覆写元素的内容)

v-html
v-text
原文地址：vue风格指南