vue 组件选项的推荐顺序 与 自动排序

一直以来使用vue开发，除了知道生命周期的 hook 函数顺序，其他选项的顺序不知道是否有规范。后来看了vue的风格指南，里面的选项是有推荐顺序的，也找了一下如何自动排序，今天就分享一下。

转载一下vue推荐顺序

先发个 Vue 风格指南 选项推荐顺序 地址

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

这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 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

使用 eslint 自动排序

如果是用 vue-cli3.0 构建的项目，选择使用eslint 的话会默认安装 eslint-plugin-vue 这个依赖项

如果没有就安装一下

npm install eslint-plugin-vue --save-dev

接着就是在 .eslintrc.js 中配置，如果用 vue-cli3.0 构建项目选择了 In dedicated config files ，就会生成 .eslintrc.js，选择 In package.json 规则就在package.json 中的 eslintConfig 这个属性上配置

在以上说的配置文件中的 extends 这个数组中加入 plugin:vue/recommended

"extends": [
  "plugin:vue/essential",
  "plugin:vue/recommended", // 添加了这一项
  "eslint:recommended",
  "@vue/prettier"
],

好了，就这么简单，保存时默认就已经有了自动格式化排序的功能了

不想使用插件推荐的顺序，想自己定顺序，也可以

在 eslint 配置文件中的 rules 属性下添加

rules: {
 "vue/order-in-components": [
   "error",
   {
     "order": [
       "el",
       "name",
       "key",
       "parent",
       "functional",
       ["delimiters", "comments"],
       ["components", "directives", "filters"],
       "extends",
       "mixins",
       ["provide", "inject"],
       "ROUTER_GUARDS",
       "layout",
       "middleware",
       "validate",
       "scrollToTop",
       "transition",
       "loading",
       "inheritAttrs",
       "model",
       ["props", "propsData"],
       "emits",
       "setup",
       "fetch",
       "asyncData",
       "data",
       "head",
       "computed",
       "watch",
       "watchQuery",
       "LIFECYCLE_HOOKS",
       "methods",
       ["template", "render"],
       "renderError"
     ]
   }
 ],
}

修改 order 数组里面选项顺序，格式化的时候，就自动按照你书写的顺序格式化

用图举个例子

在这个例子中，我修改了 watch 的顺序 在 data 的上方和下方，在 vue 文件中保存时，自动格式化了顺序。

对于 vue 组件选项推荐顺序与自动排序就分享到这里，想了解配置更多的小伙伴可以点这个 链接 eslint-plugin-vue ，学习配置更多功能。

以上信息如有疏漏或错误，欢迎指正哈