今天葡萄就给大家介绍如何基于Vite+Vue3实现一个纯前端的在线电子表格系统。在正式开始项目介绍之前，我们先介绍一下Vite和Vue3。Vue3Vue.js3.0于2020年9月18日发布，经过两年的不断优化和细节调整，终于在今年2月正式成为新的默认版本。它的作者游玉玺将Vue3的目标描述为：1.更快2.更小3.更容易维护4.更容易原生目标5.更容易开发What.这里我们将其与Vue2进行对比，为大家讲解其优势。性能提升在官方文档中对于Vue2和Vue3的性能差异有具体的数据介绍：1.SSR速度提升2~3倍2.更新性能提升1.3~2倍。性能提升的重点是在Vue3中对diff算法进行了优化。在Vue2中，每当数据发生变化时，就会生成一棵新的DOM树，将新的DOM树与旧的DOM树进行比较，判断节点的异同点并进行更新。但是，完整的遍历过程需要比较两棵树的所有节点，但在实际情况下，并不是所有的节点内容都会发生变化，造成了性能上的浪费。Vue3增加了静态标签，只比较和更新标记的节点，而不遍历整个节点，提高了性能。组合APIVue2使用选项API（OptionsAPI）。这样，代码就被分成了不同的属性：data、computed、methods等，这些method属性各司其职。例如，当我们要实现一个列表视图功能时，需要在data中写入与这个功能相关的数据，在methods中写入相关的逻辑判断和后端交互方法；如果我们还想有搜索和过滤，或者更多的功能，那么逻辑上的关注点就会增加，导致组件变得难以理解和维护。（下图为示例组件）CompositionAPI只是为了解决原有Vue2项目中代码逻辑分散，难以理解和维护的问题。它使用方法（函数）进行代码拆分，使代码更加简洁。生命周期函数变化与Vue2相比，Vue3中的生命周期函数也发生了变化。总结如下：需要的同学可以截图保存，以备不时之需。按需打包模块Vue项目中有很多API和模块，但我们不会在一个项目中使用所有的内容。Vue3的按需打包模块可以极大的压缩打包内容的体积。根据官网的对比例子，如果只用Vue2写HelloWord，不使用模块API，打包后大小约为32KB；和Vue3一样，打包后大小约为13.5KB。可以明显看出，升级后的Vue3与Vue2相比，封装体积大大减少。说完Vue3的改进，我们再来看看Vite到底有什么亮点。在Vue3正式发布之前，游禹锡提到自己做了一个新的前端构建工具——Vite。他自己就非常喜欢Vite，让Webpack开发者直呼他哥：Vite到底有什么魔力？实现本地快速开发启动：快速冷启动，无需等待打包操作，实时模块热更新，真正按需编译，无需等待整个项目编译完成，使用Webpack时会经历解析依赖=>编译打包=>交给开发服务器渲染整个过程。也就是说需要先打包，然后将打包后的结果提供给服务端加载。尤其是随着模块数量的不断增加，包的体积越来越大，导致热更新速度明显变慢。而Vite直接跳过打包步骤，直接启动开发服务器，在请求特定模块时实时编译模块，大大提高了启动速度。游玉玺本人也在微博演讲中解释了它的原理：“Vite，一个基于浏览器原生ES导入的开发服务器。使用浏览器解析导入，在服务器端按需编译返回，完全跳过了概念打包，服务器可以随时使用，同时不仅有Vue文件支持，还可以处理热更新，热更新速度不会随着模块的增加而变慢。对于生产环境，同样的代码可以用rollup来玩，虽然现在还是比较粗糙，但是我觉得这个方向是有潜力的，做好的话完全可以解决改一行代码等半天热的问题更新。”（Vite的具体实现原理可以参考文章：https://juejin.cn/post/684490...）至此我们已经详细介绍了Vue3升级的吸睛功能和Vite的优势.下篇我们将从一个项目实例入手，介绍如何基于Vite+Vue3.Form系统开发在线应用，感兴趣的朋友不要错过哦~
