如何开发一款基于 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速度提高了23倍;Update性能提高1.32倍。(程序员看到后更有信心学习了!)

除此之外,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 的在线表格系统。
感兴趣的小伙伴们不要错过~

posted @ 2022-08-16 17:15  葡萄城技术团队  阅读(919)  评论(0编辑  收藏  举报