作为一名对 Vue 和 Vue 双修的爱好者，随着 Vue 3 的逐步稳定，我打算深入探索一番。Vue 3 的更新确实相当显著，因此，本系列文章将重点详细阐述 Vue 3 中的关键特性，并在此基础上构建一个功能丰富的通用业务框架。这个框架将融入众多实用的小技巧，助你在 Vue 3 的领域中畅游无阻。

第一篇将着重介绍一些 Vue3 中重要的变化和概念 ~

1、新建项目

找个可以开机的电脑，在终端输入：

打开链接 :5173，你的眼睛就会看到：

代表项目初始化成功，你真棒！

你的目录会长这个样子：

请注意记录，掌握一些小窍门，在终端界面输入tree命令，即可查看当前项目的文件结构图。

执行命令：tree，筛选出"node_modules"、"vscode"和"cypress"这三个目录，并将结果输出到tree.txt文件中。

这个命令会做两件事:

执行tree命令展示目录的树状结构，同时将隐藏的、点以及点点三个文件夹排除在外；通过-I参数指定不显示的文件夹，这些文件夹名称之间用竖线分隔；并且将输出结果通过重定向符号大于号保存至tree.txt文件中，若该文件不存在则会自动创建。

执行 tree 命令后，其输出结果将直接被保存至 tree.txt 文件，而非直接显示在终端屏幕上。完成项目内的操作后，你会在项目根目录下发现一个名为 tree.txt 的文件。

. ├── README.md ├── cypress.config.ts ├── dist │   ├── assets 关于视图的样式文件，具体为AboutView-4d995ba2.css。 关于视图的文件，名为AboutView-675ecf4b。 禁止对编号为9f680dd7的CSS文件进行修改。 │   │   ├── index-d5df9149.js │   │   └── logo-277e0e97.svg │   ├── favicon.ico │   └── index.html ├── env.d.ts ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │   └── favicon.ico ├── src │   ├── App.vue │   ├── assets │   │   ├── base.css │   │   ├── logo.svg │   │   └── main.css │   ├── components │   │   ├── HelloWorld.vue │   │   ├── TheWelcome.vue │   │   ├── WelcomeItem.vue │   │   ├── __tests__ 在目录结构中，我们能够看到└── HelloWorld.spec.ts这一部分。 │   │   └── icons 在项目中，我们应当包含一个名为IconCommunity的Vue组件。 图标文档组件 在目录结构中，我们可以看到，该组件被命名为IconEcosystem.vue。 ├── 支持图标功能的Vue组件 此文件隶属于IconTooling组件。 │   ├── main.ts │   ├── router │   │   └── index.ts │   ├── stores │   │   └── counter.ts │   └── views │   ├── AboutView.vue │   └── HomeView.vue ├── tree.txt ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json ├── tsconfig.vitest.json ├── vite.config.ts └── vitest.config.ts

简单介绍一下重要的文件/文件夹：

其中的内容未经编译与打包处理，因此，置于其中的资料应避免直接引用。

在打包操作中，包裹内的内容会被自动复制并置于根目录之中，因此，当需要引用这些资源时，必须采用根目录的绝对路径来指定，例如：若需获取 /.ico 文件，应写作 /.ico。

：放静态资源，如：图片、CSS

：放公用组件

：与 状态管理器有关

：与 Vue 路由管理有关

：放路由组件

2、深入认识 npm xxx

在 .json 的 中常用的有三个指令：

执行npm run dev命令或npx vite指令，即可启动项目的本地服务器，同时支持热更新（HMR），这样在代码更新后，页面能够立即进行更新。

是的，在项目根目录下 npx vite 也可以启动项目！

3、为什么要打包？

Vue3项目打包的主要目:

必要的语法编译器无法识别vue文件，因此需将其转换为浏览器可理解的js和css。同时，浏览器不兼容的新ES语法也需要进行转换。为了优化代码，应去除冗余代码，以此缩短浏览器解析所需的时间，同时确保程序运行不受影响。这包括移除不必要的空白字符、注释，缩短变量、函数和参数的命名，从而减小部署后代码的体积。性能提升：通过文件整合与压缩，降低页面HTTP请求次数，从而加速页面加载。代码安全：源码在打包过程中会进行压缩和混淆处理，有效增强代码的安全性。兼容性增强：打包后的代码能够转换为各大主流浏览器可识别的语法，提升了代码在不同浏览器间的兼容性。部署便捷：打包生成的静态资源文件，便于在各种环境中进行部署。启动gzip压缩功能：在打包过程中，我们可以实施gzip压缩，以此来缩小静态资源文件的大小。代码分析：对打包完成后的文件进行深入分析，能够明确观察到项目内各文件的构成及其尺寸。

打包操作主要旨在提升系统的性能、保障数据安全、增强功能的扩展性以及简化部署流程，这些在具体的工程项目实施过程中同样是不可或缺的环节。

4、 API 和 API 区别

Vue 3 支持两种API调用方式，其中一种沿袭了Vue 2的用法，而另一种则是随着Vue 3的发布而引入的全新写法。

API 和 API 主要差别有两个：

对管理逻辑代码的方法，亦即其中的某个环节，所采用的模板与另一个模板的运用方式是相同的。（在Vue官网中，这一用法被翻译为“组合式函数”）

这里引用 FU 大神在 上的一个解释：

4.1 API

所谓的选项，指的是 Vue 按照代码的不同特性，将其划分为 data、计算属性、生命周期等不同类别，从而使得开发者能够通过选择相应选项的方式，来确立组件内部的逻辑结构。

代码一般会根据选项式 API 被分成几个区块，比如这样：

4.2 API

在API结合使用时，所有逻辑代码均可直接嵌入其中，其编写体验与原生编程几乎无异，无需遵循过多的特定规则，完全由开发者自主掌控。

在应用API的过程中，人们常常依据功能的性质来组织逻辑代码，一个功能所需的data声明，其位置可以相对集中，这样对于规模较大、结构复杂的组件而言，能显著增强代码的可读性。

API 的代码一般是这样：

4.3 两者区别

人们对于这两种方法各有所好，并无绝对的优劣之分。实际上，“自由”或“弹性”在代码管理中犹如一把双刃剑，它既考验着开发者对代码进行有效管理的技能；同时，也有开发者倾向于在既定的规则框架内进行开发。这两种选择并不存在优劣之别，它们所体现的更多的是开发风格上的差异。

这两个系统虽在背后共享相同的响应式运作原理，其核心理念并未发生改变，但鉴于Vue所规定的书写规范各异，导致它们的应用方法也有所区别。因此，Vue官方指南将教学内容划分为两种不同的API形态。

复杂组件的情况下， API 可读性更好

官网也给了这两者的直观上的区别：

建议是都能熟悉使用，不然你怎么看懂别人的 代码呢？

5、使用 API 封装自定义

在 Vue 3 的框架下，我们能够通过 API 实现对可复用逻辑的封装，这种做法与 中的 机制颇为相似。

通过自定义封装，我们能够把可复用的逻辑整合起来，并在不同组件间实现共享。这样的做法不仅能增强代码的维护性、复用性和易读性，还能有效减少代码冗余，让组件更专注于其核心业务逻辑。此外，hook 还具备优秀的命名空间管理和类型推断功能，便于进行测试等操作。

5.1

下面封装一个 的自定义 ，用于获取当前窗口的宽度和高度：

将窗口尺寸的相关逻辑封装成可复用的函数，并确保其与特定组件实现解耦。这样，其他组件只需导入并调用该函数，即可直接获取窗口尺寸信息，无需再次编写监听相关代码或逻辑。

比如，你就可以在组件中这样使用 ：

5.2 和

下面再来封装两个非常常用的自定义 ： 和 。

引入了ref、computed、onMounted、isRef和watch等函数，它们均来自"vue"库。 导出函数用于分页，该函数接受一个端点参数。 const currentPage = ref(1); 定义了一个名为 paginatedEndpoint 的计算属性，其值为一个函数，该函数在执行时返回： 返回 `${endpoint}?page=${currentPage.value}` 格式的内容； }); function nextPage() { currentPage.value++; } function prevPage() { if (currentPage.value <= 1) { return; } currentPage.value--; } return { endpoint: paginatedEndpoint, nextPage, prevPage }; } export function useFetch(endpoint) { const data = ref(null); const loading = ref(true); const error = ref(null); function fetchData() { loading.value = true; // 也可以使用 axios return fetch(isRef(endpoint) ? endpoint.value : endpoint, { method: "get", headers: { "content-type": "application/json" } }) .then(res => { // 非 200 响应码 if (!res.ok) { 创建了一个新的错误对象，其内容为响应的状态文本。 error.json = res.json(); throw error; } return res.json(); }) .then(json => { data.value = json; }) .catch(err => { error.value = err; if (err.json) { 执行操作后，若获取到JSON数据，则进一步处理：，将err.json进行解析，得到json对象后，进行后续操作： 错误信息的内容被设置为JSON消息的内容。 }); } }) .finally(() => { loading.value = false; }); } onMounted(() => { fetchData(); }); if (isRef(endpoint)) { watch(endpoint, () => { // 重新请求数据 fetchData(); }); } return { data, loading, error }; }

下面逐个分析这两个 的封装思路：

1. :

该自定义钩子专门用于处理分页的相关操作。它接受一个参数，该参数具体指明了进行分页请求所用的接口地址。

最终，我们得到了一个对象，其中包含了页码、每页显示数量以及总页数等信息。这使得在多个组件中应用分页功能变得简便，无需重复编写相关逻辑。只需调整页码的值，分页信息便会自动更新，确保能够发起准确的分页请求。

2. :

此Hook功能旨在执行异步请求并妥善处理返回的数据，它接受一个参数，该参数指明了需要调用的接口地址。

组件加载完毕后，会执行函数调用，这一过程相当于发送请求。若该引用具备响应性，则会通过监听其变化来触发，一旦发生变化，便再次调用该函数，目的是为了重新获取所需数据。

最终，我们提供一个对象，其中包含data以及其它相关内容。这使得在组件中发起请求变得更为便捷。通过执行特定函数，我们不仅能触发请求并接收相应的数据，还能实时跟踪请求的加载进度以及可能出现的错误信息。因此，组件得以将更多精力投入到业务处理上，无需过多纠缠于请求的具体细节。

怎么使用呢？

6、几个重要的东西6.1 () 和

在最新版本的API中，我们采纳了这一设计理念，旨在取消多余的包装器以及过时的组件选项，以此实现组件编写过程的简化与聚焦。这种做法可以视作对()语法的一种优化，举例来说：

运用语法糖，我们能够以更精炼的方式编写组件的内在逻辑。这样一来，我们便无需再编写那些冗余的代码行。

对比一下：

6.2 和

为了明确指出某些选项，比如“声明”和“等”，我们不得不借助该工具自带的所谓编译器宏。

这两个函数不需要导入，在预处理 时会自动编译。

如果你使用了 ，那么最好也声明一下 和 的类型：

6.3 多个

在某些特定情境下，我们或许需要为组件设定特定的自定义选项，例如自定义组件的名称；若某些功能无法实现，则可以转而采用一种传统的编写方式，在编译 *.vue 文件的过程中，这两个部分将会自动合并。

6.4

在 Vue 3 的 API 中，存在一种机制，允许将组件的某些内容暴露给其父组件使用。这一功能允许你明确指定哪些属性、方法或其他资源可供父组件访问和调用。例如：

定义了一些。

通过函数，我们可以将内部的属性与方法展现出来。在模板中，我们能够如同操作常规属性与方法一般，运用这些展示的信息。当用户点击按钮时，会触发并调用该方法。

父组件可以像下面这样访问和使用子组件暴露的内容：

在父组件内部，我们通过ref属性建立了一个对子组件的引用。借助这个引用，我们能够访问子组件的实例，进而调用其公开的函数。

6.5

在构建组件时，我们常常需要进行数据的异步获取，例如，在组件的顶层部分，我们往往会采用这种技术。采用此方法定义的组件，必须配合另一个特定组件一同使用（难道我也需要拥有它？），只有这样，Vue 才能妥善处理异步问题，并确保组件能够被正确加载。

该组件为内置类型，其功能在于对组件树中的异步依赖进行有效协调。通过它，我们得以在上层组件中同步等待下层嵌套的多个异步依赖项逐一解析完毕，同时，在等待过程中，我们还能展示一个加载中的状态。

需留意的是，这仍属于一项实验性质的功能；它未必会最终演变为成熟功能；在正式稳定之前，相关的API也有可能经历调整。

7、SFC

在 Vue 3 框架下，单文件组件（SFC）模式将模板、脚本以及样式内容整合至一个独立的文件内，形成了一种独特的开发模式。这种模式极大地简化了 Vue 组件的组织与编写过程，同时增强了代码的可读性与维护性。

一个典型的 Vue 3 SFC 包含三个部分：

以下是一个示例 SFC 文件的结构：

由于浏览器无法识别.vue文件，因此在开发过程中，我们无法再像以往那样直接在浏览器上通过live预览项目；这就导致了我们必须借助Vite或Vue Cli等构建工具，这些工具能够依据Vue提供的指令如-@vue/-sfc对.vue文件进行编译。

Vue 3 的编译器负责对 SFC 的模板、脚本以及样式部分进行解析，随后将其转化为执行中的渲染函数、代码和样式。通过这种方式，开发者能够在一个文件中整合组件的结构与逻辑，从而提升代码的维护性和易读性。在构建阶段，Vue 3 的编译器将 SFC 转换为可在浏览器中运行的 Vue 组件。

启动浏览器后查看控制台，你会发现，尽管文件后缀是.vue，但若你仔细观察，实质上它已经演变成了.js格式。

原文链接：