介绍

这是一篇指导你如何使用Vue3进行开发的规范化指南，我将使用我多年开发vue3总结的经验来指导你如何进行大型vue3开发的规范化。更多信息查阅引导文章

Vue组件

在Vue3项目中，始终建议将<script></script>写在组件头部。并且始终使用ts和setup。

<script lang="ts" setup>
</script>
<template>
</template>
<style>
</style>

Vue3实际上允许Options和Composition同时存在。由于Composition不能声明组件名，你可以在Options中单独声明组件名，但不要在此添加其他逻辑。

一个组件的所有代码应不超过500行，如果超过，应该考虑拆分逻辑到其他组件，即使不需要复用。如果你的html或者css部分过多导致文件行数难以压缩到500行以下，可以适当提升阈值。但始终不要，也完全没有必要超过1000行。

script

在script中，应遵循如下的顺序编写代码。

 // 导入语句 import from
 // 数据流输入语句 defineProps、defineEmits、inject、useStore
 // 业务逻辑 ref、methods
 // 数据流输出语句 defineExpose、 provide

导入语句

应包含import

数据流输入语句

应包含props的定义，emit的定义，依赖注入inject，和状态管理的导入。

业务逻辑

主要包含响应式变量和方法的定义。实际上除了其他部分的代码都需要写在这里。

这部分代码不应该像Vue2一样使用data => methods => lifecycle的顺序。而是应该将属于同一个功能点的代码聚集到一起。

// 控制Dialog窗口显示
const showDialog = ref(false)

function show() {
    showDialog.value = true
    // 显示时需要的其他逻辑
}

function close() {
    showDialog.value = false
    // 清除校验的代码
    // 关闭时需要的其他逻辑
}
onMounted(() => {
    show() // 默认打开
    // 对Dialog窗口做一些操作
})
// 表单相关逻辑
const formData = reactive({
    name: '',
    signature: ''
})
const formEl = ref<InstanceType<typeof HTMLFormElement>>()
const inputEl = ref<InstanceType<typeof HTMLInputElement>>()
const rule = [
    // 表单校验规则...
]
onMounted(() => {
    // 对表单做一些操作
})

尽管我们可以通过这种方式在同一个组件中包含多个功能点还能保持较高的可读性，但仍然建议将不同的功能拆分到其他组件中，即使不需要复用。除非多个功能点的逻辑之间存在较大的耦合关系，比如在以上例子中，我们可能需要在Dialog窗口显示时默认获取焦点；在Dialog窗口关闭时清除表单的校验，这样的耦合关系使得拆分组件的成本骤升，并且不需要复用逻辑，那么就没有必要拆分组件。

一个良好的Vue3组件的script部分应不超过300行。

更多Setup的相关内容请移步Vue3项目开发深度规范化指南-Setup+TypeScript

template

在template中，可能会用到像Dialog这样跳出组件视图之外的内容，推荐将这样的代码移动到template的最下方，我们可以通过控制其显示的变量来快速地找到它的视图部分和逻辑部分。这样有利于进行后期维护。

<script setup lang="ts">
// Dialog逻辑部分
const showDialog = ref(false)
</script>
<template>
// 其他视图...
<Dialog v-model:show="showDialog">
// Dialog视图部分
</Dialog>
</template>

style

如果你正使用类似tailwind css这样的框架，可以忽略本节。

始终将同一部分视图的css聚集到一起，包括媒体查询和动画帧的代码，也因聚集到与之对应的部分，而不是始终定义到整个style的最上方。

如果你使用类似sass这样的编译器，应尽量保证class作用域的最小化。例如我们经常使用active类名来表示元素激活的样式，应善用&符号。

ul {
    // ...
    .item {
        // ...
        &.active {
            // 在此定义激活的样式
        }
    }
    
    .active {} // 不要在这里定义激活的样式
}

专栏正在更新中，欢迎订阅！

Vue3项目开发深度规范化指南-Vue组件

介绍

Vue组件

script

template

style