乐趣区

关于vue3:如何开发一款基于-ViteVue3-的在线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/684490…)

到这里咱们曾经具体为大家介绍了 Vue3 降级的亮眼性能和 Vite 的劣势,在下局部中咱们会以我的项目实例登程,为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格零碎。
感兴趣的小伙伴们不要错过~

退出移动版