VUE 3 组件开发实战 – 在线电子表格文档编辑（一）
本帖最后由 Lynn.Dou 于 2022-5-25 16:32 编辑一、VUE 3新功能
2020年09月18日，Vue.js 3.0 正式发布。尤雨溪将vue3的目标描述为：
1.让它更快
2.让它更小
3.使它更易于维护
4.使原生目标更容易
5. 让您的生活更轻松
本次发布框架本身带来了几个大点的改进，本文对这些改进做一个大致的介绍。
（1）Performance（性能）
在之前的vue2中，某个DOM需要更新时，需要遍历整个虚拟DOM树才能判断哪个地方需要更新，进而重新渲染。而Vue3新增了静态标记，在与上次虚拟节点进行对比时，只对比带有patch flag的节点，所以每次DOM的更新无需再遍历整个DOM树进行判断。
针对vue2和vue3的性能差异，在官方文档中对具体数据做了介绍：
1.SSR速度提高了2~3倍
2.Update性能提高1.3~2倍
（2）Composition API（组合API）
vue2中有data、methods、mounted等存储数据和方法的对象，我们对此应该不陌生了。比如说想实现一个轮播图的功能，那么首先需要在data里写上与此功能相关的数据，在methods里写实现这个功能的方法，在mounted里写上进入页面自动开启轮播的代码…… 这样就会出现一个问题：同一个功能的代码却要分散在在页面的不同地方，维护起来会较麻烦。而vue3的 Composition API就是来解决这个问题的，它主要提供两大好处：
1.清晰的代码结构
2.消除重复逻辑
首先了解一下 Composition API新特性的入口—— setup()函数，该函数是为组件提供的新属性。
setup()函数是一个将属性和方法返回到模板的函数，等效于vue2中的beforeCreate 和 created，在组件初始化的时候执行。如果想使用setup里的数据，需要将值return出来，没有从setup函数返回的内容将在模板中不可用。
vue3提供了一个新函数：ref函数。它的作用是创建一个引用值，主要是对String、Number、Boolean的数据响应做引用。
相对于vue2，vue3中生命周期函数发生了变更，总结如下：
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
需要注意的是，vue2使用生命周期函数时是直接在页面中写入生命周期函数，而vue3则无需写入函数，直接引用即可。
import {reactive, ref, onMounted} from 'vue'
(3）Tree shaking support（按需打包模块）
“Tree shaking”有人称之为“摇树优化”，那么究竟是什么意思呢？作者对其做了解释：“Tree shaking”其实就是把无用的模块进行“剪枝”，很多没有用到的API将不会打包到最后的包里。
我们知道在vue中有很多的API和模块，不过一个项目中不可能会用到全部的API和模块，所以“Tree shaking”后，打包后的包体积会大幅度减少。
官方对vue和vue3做了对比，vue2若只写了Hello World，并没有用到任何的模块API，打包后大小约为32kb。而vue3 如果只写HelloWorld，同样没用到任何的模块API，打包后大小约为13.5kb，相对于vue2体积大小大幅度减少。从中也可以看出，Vue3比Vue2更轻量。
(4）Better TypeScript support（更好的TS代码支持）
为了更好的用户使用，Vue3使用了TypeScript重新对Vue框架进行了重写，增加了对TypeScript更好的支持。
（5）Fragments（碎片）
vue2要求组件模板中只能有一个根节点，而不可以有多个根节点。vue3不再限制模板只能有一个根节点。这也就意味着下图这种写法是支持的了。
（6）多个v-model同时使用
Vue 2 只允许在一个组件上使用一个 v-models。在 Vue 3 中，我们可以将任意数量的 v-model 绑定到我们的自定义组件上。
二、新工具vite介绍
除了vue-cli 之外，官方还提供了一个新的脚手架工具：vite。
Vite是尤雨溪开发的一个新工具，它是一个基于 Vue3 单文件组件的非打包开发服务器，具有以下的优点：
1.可以快速的冷启动，不需要等待打包；
2.即时的热模块更新；
3.真正的按需编译，不用等待整个项目编译完成。
可以说，vite的出现大大的撼动了webpack的地位。Webpack在打包的时候会有两个阶段：编译和打包。打包时存在一个问题，那就是开发阶段也需要打包构建然后才能在浏览器看到页面，这样会导致除此启动等待时间较长。并且打包的时候随着模块的不断增多，打包的包体积较大，这就会造成热更新速度明显拖慢。
Vite的诞生解决了这个问题，尤雨溪在微博中的发言解释了原理：“Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在
服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。”
Vite具体的实现原理可参考文章：https://juejin.cn/post/6844904136299790349
三、使用vite初始化一个vue3 项目
初始化项目命令：( 注：project-name 为项目名)
$ npm init vite-app <project-name>
$ cd <project-name>//进入项目目录
$ npm install//安装项目所需依赖
$ npm run dev//启动项目
做个示例：搭建一个 项目名为 myVue3 的项目。
执行命令：npm init vite-app myVue3
可以看到，在test文件夹中已经搭建好了一个项目。项目结构如下：
执行命令：cd myVue3进入项目目录
执行命令：npm install 安装相关模块。
项目结构如下：模块已下载成功。
最后执行命令：npm run dev 启动这个项目
进入地址，当我们看到这个页面时，说明项目已经成功启动了。
参考：https://lpyexplore.blog.csdn.net/article/details/107820234
https://www.imooc.com/article/301976
http://www.huiyani.com/archives/3309/
页:
[1]