如何在公司内部增强 Vue 开发体验
Feb 18 · 15min
这是我2023在公司内部分享的一次关于 Vue 开发体验的分享
使用 Slidev 制作 - 一个为开发者打造的演示文档工具
Hello，大家好，我是 Elone Hoo.
这是我在公司内部的一次演讲。这是我第一次做这样的分享，不足之处还请多多指教。
我这次和大家分享的是 如何增强 Vue 开发体验，和大家简单聊一聊 Vue 3 的响应式和组合式，以及他们的一些应用。
让我们从谈论开发者体验开始。这些年我们越来越频繁地听说开发者体验。 框架在改善开发人员体验方面付出了很多努力，使我们的工作更有效率和成果，当然还有更好的体验。在这里，我想把这个大概念分成不同的部分，看看我们做了什么来真正从框架的角度有所不同。
我要选择的第一件事是“响应能力”，也就是我们俗称的HMR。
在 Vue 3 中，我们将默认的捆绑器切换为 Vite，该工具以其即时热模块替换而闻名，或者称为 HMR。 它使您几乎可以立即看到从代码到应用程序的更改，并创建了一个很好的工作流程和反馈循环。
在服务器端渲染上，我们使用 vite-node，与 Vitest 相同的引擎，在服务器端执行 HMR。
最后，我们介绍了 Spring DevTool，除了它提供的许多很棒的功能外，它还在开发时为服务器 API 提供热重载。 还记得每次更改后端 API 时需要重新启动节点进程的时间吗？ SpringBoot 不再如此！
结合所有这些工具，我们能够使您的应用程序对您所做的任何更改做出改变，无论是客户端代码、ssr 还是服务器端 API。
作为一个框架，Vue 社区提供了很多通用的内置实践。
感谢 Vite 提供了 TypeScript 和 ESM 的开箱即用。
Vue 社区还使构建单页应用程序、服务器端呈现、静态站点生成或按路由混合它们变得简单——使用相同的代码库同构而无需任何显式设置。
然后我们提供了布局系统、插件、路由中间件等，让应用程序的创建更容易，你的代码库更有条理。
最重要的是，我们还提供了一些可组合的实用程序，例如 useState 和 useAsyncData，以及 SEO 实用程序，例如 useHead 和 useSeoMeta，使状态可以跨服务器端和客户端访问。
更不用说我们还拥有最好的后端集成之一。 借助 Spring Devtool，我们可以使用零配置将 HMR 在 Spring 项目中展示。
所有这些功能都试图提供您可能需要的开箱即用的常见做法和合理的默认设置。 并节省您的时间去配置它们。
然后到了很酷的部分，我们还介绍了一些约定。
第一个是基于文件的路由，它允许您通过简单地在文件系统中创建具有相同结构的 Vue 组件来拥有一个多页面应用程序。
然后我们添加组件自动导入，components 文件夹下的组件将在任何与其文件名相同的 Vue 文件中直接可用。 而且，它们将很好地进行代码拆分。
在 Vue 社区中，我们引入了 unplugin-auto-import-api 。 这意味着您不再需要在每个组件中键入 import { ref } from 'vue'。 Vue 的 API 可直接供您使用。 第 3 方模块还可以提供要自动导入的自定义可组合项，这同样适用于我们本地的 Composition API。
最后，所有这些约定都是完全同步的。 在进行路线导航或从 API 获取数据时，我们甚至可以使用类型自动完成功能。
引入约定可以大大减少我们需要编写的样板文件并避免代码库中的重复。 我认为这对提高工作效率有很大的帮助。
在生态系统方面，Vue 有一个庞大的社区来围绕它构建模块。 在我们的网站上看看这些，我们有数百个高质量的模块供您选择，这里的所有模块都可用于 Vue 3。有了插件，我们可以毫不费力地集成想要的功能。 他们正在为我们处理细节和最佳实践。
那么什么是响应式呢？提到这个就得祭出这张非常经典的 GIF。在一个 Excel 表格里面，我们会以公式的形式去定义一个一个单元格应该去做怎么样的一个运算。那么大家可以看到，在我设置好了 A3 这个格子的公式之后，我去更新 A1 的数值时， A3 就会自动更新，而我不需要再去做任何的操作。这就是响应是能够给我们带来的一个非常好的帮助，依赖的自动收集跟更新。
在 Vue 3 里面，我们对整个响应式系统做了一个重新的设计，同时暴露出了这几个新的API，ref reactive computed effect。我们把原本 Vue 2 Object.defineProperty 的实现改成了使用 Proxy 的实现方式。而 Proxy 可以给我们提供对属性更新监控的更大的灵活性。
我们可以通过 get 和 set 这两个 handler 去追踪每一个属性的访问和修改，在这个例子中我们在 get 里注入了 track 这个函数，在 set 里注入了trigger 这个函数。那么在对 reactive 这个对象的 hello 属性进行访问的时候 track 就会被执行，在对 obj.hello 进行赋值的时候，trigger 就会被执行。通过 track 和 trigger 我们就可以进行一些响应式的追踪。
effect 是在 Vue 3 里面新引入的一个API，它的作用就是去结合 track 和 trigger 这两个功能，track 的作用是追踪调用他的函数，trigger 是去触发绑定的依赖更新。
在 effect 里面我们会接受一个函数作为参数，在执行这个函数之前的我们会开启 tracking，然后把当前的函数设置在一个全局变量 activeEffect，然后再去执行这个函数。那么在这个函数的调用时间里面我们有任何的 reactive 的调用就会触发 track 这个函数。track 的主要功能就是说我们把当前的 activeEffect 绑定到所触发它的这个属性调用上。然后在数据更新的时候，我们再去找到这个依赖上面所绑定的所有 effect 把他们一一调用。这样就完成了一个最基本的响应式的功能。
因此，通过 Vue3 的上下文，让我们对于代码管理向前迈一步
众所周知 Git 是一个开源的现代版本控制系统。
多分支管理是 Git 一个非常重要的特点，因为多分支可以保证主分支不会产生任何的问题，而工作分支确定无误，就可以加入主分支。
Git 天然的支持多个版本，如果当前版本出现问题，我们可以方便的回滚到上一个版本。
在 Git 中我们可以清晰的看到每个提交之间所产生的差异。
让我们前往 Demo
所以，这是一个使用 Git 孵化的项目，在这里我们可以看到我们是如何处理分支和看到所有的版本，以及我们在这个项目中的diff。
首先我们点开 tag 可以看到所对应的版本，和每一个版本之间的功能差异。
在点开 Pull Request 可以看到我们是如何处理多分支之间的合并。
随便点开一个 PR，打开 Files changed 可以看到里面的文件差异，这个就是我们所说的 diff
我的分享就到这里。 这些幻灯片可以在我的网站上找到。 谢谢！