如何开发一款基于 Vite+Vue3 的在线表格系统（上）

今天，葡萄带你了解如何基于 Vite+Vue3 实现一套纯前端在线表格系统。在正式开始项目介绍之前，首先咱们首先来介绍一下 Vite 和 Vue3。

Vue3

Vue 是什么？大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣，众多开发者各抒己见，其中 Vue 以其“最简单、最易上手“的名号迅速积累了一大批粉丝，被广泛学习应用。同 Angular、React 框架一样，Vue 也是 MVVM 类型的框架，即数据驱动视图，在开发时我们只需要关注数据的变化即可。不同的是，Vue 是一个更轻量级的框架，被设计为自底向上逐层应用，其核心库只聚焦于视图层， 通过尽可能简单的 API 实现了响应式数据绑定以及组合的视图组件。Vue 已经如此优秀，为什么还需要 Vue3 呢？

这就要提到它的不足之处了，在之前的 Vue2 中，使用的是选项型 API（Options API），将代码分割为不同的属性：data、computed、methods 等，这些方法属性各司其职。选项型 API 固然好学易上手，与此同时也带来了一个关键问题：代码混乱，可读性差。举个例子，现在我们想做一个列表视图功能，那么需要在 data 中写上相关的变量，在 methods 中将相关的逻辑判断和后端交互也加上。这个时候，新需求来了：添加上搜索和筛选功能。没有问题，继续将新的变量堆积在 data 中，将新的方法整理在 methods 中……写代码一时爽，后期维护的程序员傻眼了，这一堆堆的方法，到底在讲个啥。既然 Vue2 这个弊端已经暴露出来了，自然要在它的升级版尝试解决了。所以 Vue3 推出了组合式 API（Composition API），正是为了解决原本 Vue2 项目中代码逻辑分散、不易理解和维护的问题。它使用方法（function）进行代码分割，使代码更为简洁易读。既然做了，其他方面也不能落下啊！在性能上面，Vue3 也对 diff 算法进行了优化：在 Vue2 中，每当数据发生变化，就会生成一个新的 DOM 树，并新 DOM 树与旧的 DOM 树进行对比，来判断节点异同，并进行更新。但完整遍历过程需要将两棵树所有节点进行比较，但实际情况中并不是所有节点内容都会变化，这就造成了性能的浪费。Vue3 新增了静态标记，仅对标记了的节点进行对比并进一步更新，无需再遍历整个节点，实现了性能提升。对比 Vue2，官方文档对 Vue 性能有具体的数据介绍：SSR 速度提高了 2~3 倍；Update 性能提高 1.3~2 倍。（程序员看到后更有信心学习了！）

除此之外，Vue 项目中也有众多 API 和模块，但在实际项目中我们并不会用到所有的内容，Vue3 对此推出按需打包模块，可以大幅压缩打包后的内容体积。根据官网对比示例，Vue2 中如果仅写了 Hello Word，未用到任何模块 API，打包后大小约为 32KB；而 Vue3 同理，打包后大小约为 13.5KB，可以明显看出升级后的 Vue3 相较于 Vue2 打包体积大幅减小。与 Vue2 相比，Vue3 中生命周期函数也发生了变更，总结如下：

有需要的同学可以截图保存，以备不时之需。

说完了 Vue3，接下来我们来看看 Vite 又有什么亮眼之处。

Vite

在 Vue3 正式发布之前，尤雨溪就提到做了一个新的前端构建工具-Vite。其本人更是对 Vite 青睐有加，引得 Webpack 开发者直喊大哥。Vite 究竟有什么样的神奇作用呢？它做到了本地快速开发启动：

1. 不需要等待打包操作，快速冷启动

2. 即时的模块热更新

3. 无需等待整个项目编译完成，做到真正的按需编译在使用 Webpack 时，会经历分析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说，需要先打包，之后将打包结果提供给服务器进行加载。而随着模块的不断增多，打包的体积会越来越大，造成热更新速度明显拖慢。而 Vite 直接略过了打包步骤，直接启动开发服务器，在请求具体的模块时再对该模块进行实时编译，大大提高了启动速度。

到这里我们已经详细为大家介绍了 Vue3 升级的亮眼功能和 Vite 的优势，在下部分中我们会以项目实例出发，为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格系统。感兴趣的小伙伴们不要错过~