写点什么

如何开发一款基于 Vite+Vue3 的在线 Excel 表格系统(上)

  • 2022 年 7 月 27 日
  • 本文字数:1545 字

    阅读完需:约 5 分钟

如何开发一款基于 Vite+Vue3 的在线Excel表格系统(上)

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

Vue3

2020 年 09 月 18 日 Vue.js 3.0 发布,经历了两年时间的对细节的不断优化与调整,终于在今年 2 月正式成为新的默认版本。其作者尤雨溪将 Vue3 的目标描述为:1、更快 2、更小 3、更易于维护 4、原生目标更容易 5、开发更轻松只看上述内容,你可能感受不到 Vue3 究竟优化了什么。这里我们将它和 Vue2 来对比一下,为大家具体说明它的优越之处。


性能的提升

在官方文档中针对 Vue2 和 Vue3 之间的性能差异有具体的数据介绍:1、SSR 速度提高了 2~3 倍 2、Update 性能提高 1.3~2 倍其中性能提升的重要一点是 Vue3 中对 diff 算法进行了优化。在 Vue2 中,每当数据发生变化,就会生成一个新的 DOM 树,并新 DOM 树与旧的 DOM 树进行对比,来判断节点异同,并进行更新。但完整遍历过程需要将两棵树所有节点进行比较,但实际情况中并不是所有节点内容都会变化,这就造成了性能的浪费。Vue3 新增了静态标记,仅对标记了的节点进行对比并进一步更新,无需再遍历整个节点,实现了性能提升。


组合式 API

Vue2 使用选项型 API(Options API),这种方式下将代码分割为不同的属性:data、computed、methods 等,这些方法属性各司其职。举个例子,当我们想实现一个列表视图功能,需要在 data 中写此功能相关的数据,在 methods 中写相关的逻辑判断和后端交互方法等;如果还希望有搜索和筛选,或者更多的功能,那么逻辑关注点会越来越多,导致组件变得难以理解和维护。(下图为示例组件)



组合式 API(Composition API)正是为了解决原本 Vue2 项目中代码逻辑分散、不易理解和维护的问题。它使用方法(function)进行代码分割,使代码更为简洁。


生命周期函数变更

与 Vue2 相比,Vue3 中生命周期函数也发生了变更,总结如下:



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

按需打包模块

在 Vue 项目中有众多 API 和模块,但在一个项目中我们并不会用到全部内容, Vue3 的按需打包模块,可以大幅度压缩打包后的内容体积。根据官网对比示例,Vue2 中如果仅写了 Hello Word,未用到任何模块 API,打包后大小约为 32KB;而 Vue3 同理,打包后大小约为 13.5KB,可以明显看出升级后的 Vue3 相较于 Vue2 打包体积大幅减小。说完了 Vue3 的改进,接下来我们来看看 Vite 又有什么亮眼之处。

Vite

在 Vue3 正式发布之前,尤雨溪就提到做了一个新的前端构建工具-Vite。其本人更是对 Vite 青睐有加,引得 Webpack 开发者直喊大哥:



Vite 究竟有什么样的魔力呢?它做到了本地快速开发启动:


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

  2. 即时的模块热更新

  3. 真正的按需编译,不用等待整个项目编译完成、


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



尤雨溪本人也在微博发言解释了其原理:“Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙,但这个方向我觉得是有潜力的,做得好可以彻底解决改一行代码等半天热更新的问题。”(Vite 具体的实现原理可参考文章:https://juejin.cn/post/6844904136299790349


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

发布于: 刚刚阅读数: 3
用户头像

赋能开发者 2020.05.09 加入

西安葡萄城信息技术有限公司是全球领先的软件开发技术和 低代码 平台提供商,以“ 赋能开发者”为使命,致力于通过各类软件开发工具和服务,创新开发模式,提升开发效率,推动软件产业发展,为“数字中国”建设提速

评论

发布
暂无评论
如何开发一款基于 Vite+Vue3 的在线Excel表格系统(上)_前端_葡萄城技术团队_InfoQ写作社区