第 6 卷
</template>
2.1.3 指令都使用缩写形式
指令推荐都使用缩写形式，(用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:)
正例：
<input @input="onInput"
@focus="onFocus"
>
反例：
<input v-on:input="onInput"
@focus="onFocus"
>
2.1.4 标签顺序保持一致
单文件组件应该总是让标签顺序保持为正例：
<template>...</template> <script>...</script>
<style>...</style>
反例：
<template>...</template> <style>...</style>
<script>...</script>
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods
2.1.8 Vue Router 规范
- 页面跳转数据传递使用路由参数
页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex
数据丢失，导致 B 页面无法正常显示数据。
正例：
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });
- 使用路由懒加载（延迟加载）机制
{ path: '/uploadAttachment',
name: 'uploadAttachment', meta: {
title: '上传附件' },
component: () => import('@/view/components/uploadAttachment/index.vue')
},
- router 中的命名规范
path、childrenPoints 命名规范采用kebab-case命名规范（尽量vue文件的目录结构保持一致，因为目录、文件名都是kebab-case，这样很方便找到对应的文件）
name 命名规范采用KebabCase命名规范且和component组件名保持一致！（因为要保持keep-alive特性， keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
// 动态加载 export const reload = [
{ path: '/reload',
},
children: [ {
path: '/reload/smart-reload-list', name: 'SmartReloadList',
meta: { title: 'SmartReload',
childrenPoints: [ {
title: '查询', name: 'smart-reload-search'
}, {
title: '执行reload', name: 'smart-reload-update'
}, {
title: '查看执行结果', name: 'smart-reload-result'
} ]
}, component: () =>
import('@/views/reload/smart-reload/smart-reload-list.vue')
} ]
} ];
- router 中的 path 命名规范
path除了采用kebab-case命名规范以外，必须以 / 开头，即使是children里的path也要以 / 开头。如下示例目的：
经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和 children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的
组件
{ path: '/file',
name: 'File', component: Main,
meta: {