如何开发一款基于 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究竟有什么样的神奇作用呢?它做到了本地快速开发启动:
- 不需要等待打包操作,快速冷启动
- 即时的模块热更新
- 无需等待整个项目编译完成,做到真正的按需编译
在使用Webpack时,会经历分析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说,需要先打包,之后将打包结果提供给服务器进行加载。而随着模块的不断增多,打包的体积会越来越大,造成热更新速度明显拖慢。
而Vite直接略过了打包步骤,直接启动开发服务器,在请求具体的模块时再对该模块进行实时编译,大大提高了启动速度。
到这里我们已经详细为大家介绍了Vue3升级的亮眼功能和Vite的优势,在下部分中我们会以项目实例出发,为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格系统。
感兴趣的小伙伴们不要错过~
如何开发一款基于 Vite+Vue3 的在线表格系统(上)的更多相关文章
- 如何开发一款基于 vite+vue3 的在线表格系统(下)
在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容.在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建. 使用Vite初始化Vue3项目 在这里需要注意:根据 ...
- 手把手带你实现基于 Vite+Vue3 的在线Excel表格系统
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...
- 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么
浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...
- 基于ssh框架的在线考试系统开发的质量属性
我做的系统是基于ssh框架的在线考试系统.在线考试系统有以下几点特性:(1)系统响应时间需要非常快,可以迅速的出题,答题.(2)系统的负载量也需要非常大,可以支持多人在线考试(3)还有系统的安全性也需 ...
- 基于SSH框架的在线考勤系统开发的质量属性
我要开发的是一个基于SSH框架的在线考勤系统. 质量属性是指影响质量的相关因素,下面我将分别从6个系统质量属性(可用性,易用性,可修改性,性能,安全性,可测试性)来分析我的系统,以及如何实现这些质量属 ...
- 三个小白是如何在三个月内搭一个基于kaldi的嵌入式在线语音识别系统的
前面的博客里说过最近几个月我从传统语音(语音通信)切到了智能语音(语音识别).刚开始是学语音识别领域的基础知识,学了后把自己学到的写了PPT给组内同学做了presentation(语音识别传统方法(G ...
- 基于Spring Boot的在线问卷调查系统的设计与实现+论文
全部源码下载 # 基于Spring Boot的问卷调查系统 ## 介绍 > * 本项目的在线问卷调查调查系统是基于Spring Boot 开发的,采用了前后端分离模式来开发. > * 前端 ...
- 基于Vite+React构建在线Excel
Vite是随着Vue3一起发布的一款新型前端构建工具,能够显著的提升前端开发体验,它主要由两部分组成: (1)一个开发服务器,它基于**原生ES模块提供了丰富的内建功能,如速度快到惊人的 模块热更新( ...
- 循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理
在我们一般系统中,往往都会涉及到附件的处理,有时候附件是图片文件,有时候是Excel.Word等文件,一般也就是可以分为图片附件和其他附件了,图片附件可以进行裁剪管理.多个图片上传管理,及图片预览操作 ...
随机推荐
- ClickHouse(01)什么是ClickHouse,ClickHouse适用于什么场景
ClickHouse的由来 ClickHouse是什么数据库?ClickHouse速度有多快?应用场景是怎么样的?ClickHouse是关系型数据库吗?ClickHouse目前是很火爆的一款面向OLA ...
- redis-server.exe双击闪退
转自 https://blog.csdn.net/qq_40361770/article/details/80454248 解决方法: 1-win+R 打开命令行 2-cd至redis目录,例如 D: ...
- BI 如何让SaaS产品具有 “安全感”和“敏锐感”(上)
SaaS模式一经推出,凭借自身的高性价比.低维护成本,无需软硬件维护.无需运维等明晃晃的优点,得到了爆发式的增长,甚至全面改变了软件的开发模式.各位老总的问候语,不知从什么时候开始,都变成了:&quo ...
- JDBC、ORM、JPA、Spring Data JPA,傻傻分不清楚?一文带你厘清个中曲直,给你个选择SpringDataJPA的理由!
序言 Spring Data JPA作为Spring Data中对于关系型数据库支持的一种框架技术,属于ORM的一种,通过得当的使用,可以大大简化开发过程中对于数据操作的复杂度. 本文档隶属于< ...
- 5G的发布加快了智慧城市/三维物联网等行业的发展
最近很多人发现自己的5G手机突然没了5G信号,难道是美国搞的鬼? 不不不,这其实是因为5G的NSA基站被撤站了,官方已经做了部署,要大力推进SA网络建设.所以之前支持NSA模式的5G手机,现在都成了4 ...
- 3D大场景展示功能你了解多少?见详解!
裸眼3D技术的出现打破了真实与虚拟的界限,人们不仅希望能够体验奇妙的虚拟场景,也希望足不出户在短短几分钟内就能看到遍布各地的场景,希望能实时对接关键数据. 裸眼3D技术的出现打破了真实与虚拟的界限,人 ...
- Vue.js与ElementUI搭建无限级联层级表格组件
前言 今天,回老家了.第一件事就是回家把大屏安排上,写作的感觉太爽了,终于可以专心地写文章了.我们今天要做的项目是怎么样搭建一个无限级联层级表格组件,好了,多了不多说,赶快行动起来吧!项目一览 到底是 ...
- Leetcode 1051. 高度检查器
这题的目的是找出排序后和排序前位置不同的元素的个数 正常通过复制出一个新的数组,然后对比排序后的数组就能做出,但是时间是1ms 然后发现一种基于桶排序来计数的做法 public int heightC ...
- SAP 实例 8 HTML from the MIME Repository
REPORT demo_html_from_mime. CLASS mime_demo DEFINITION. PUBLIC SECTION. CLASS-METHODS main. PRIVATE ...
- 隐私计算FATE-离线预测
一.说明 Fate 的模型预测有 离线预测 和 在线预测 两种方式,两者的效果是一样的,主要是使用方式.适用场景.高可用.性能等方面有很大差别:本文分享使用 Fate 基于 纵向逻辑回归 算法训练出来 ...