Vue3+Vite+Vant-UI 开发双端招聘APP

xia栽ke：chaoxingit.com/2390/

Vue是一套用于构建用户界面的渐进式框架，与其它大型 JS 框架不同，Vue 被设计为可以自底向上逐层应用，更易上手，还便于与第三方库或既有项目整合，因此，Vue完全能够为复杂的单页应用提供驱动。

2020年09月18日，Vue.js 3.0 正式发布，作者尤雨溪将其描述为：更快、更小、更易于维护。

Vue3 都加入了哪些新功能？

本次发布， Vue框架本身迎来了多项更新，如Vue 此前的反应系统是使用 Object.defineProperty 的 getter 和 setter。 但是，在 Vue3 中，将使用 ES2015 Proxy 作为其观察者机制，这样做的好处是消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。

除了基于 Proxy 的观察者机制，Vue3 的其他新特性还包括：

1. Performance（性能提升）

在Vue2中，当某个DOM需要更新时，需要遍历整个虚拟DOM树才能判断更新点。而在 Vue3 中，无需此项操作，仅需通过静态标记，对比虚拟节点上带有patch flag的节点，即可定位更新位置。

对比Vue2和Vue3的性能差异，官方文档中给出了具体数据说明：

· SSR速度提高了2~3倍

· Update性能提高1.3~2倍

2. Composition API（组合API）

Vue2中有data、methods、mounted等存储数据和方法的对象，我们对此应该不陌生了。比如说要实现一个轮播图的功能，首先需要在data里定义与此功能相关的数据，在methods里定义该功能的方法，在mounted里定义进入页面自动开启轮播的代码…… 有一个显而易见的问题，就是同一个功能的代码却要分散在页面的不同地方，维护起来会相当麻烦。

为了解决上述问题，Vue3推出了具备清晰的代码结构，并可消除重复逻辑的 Composition API，以及两个全新的函数setup和ref。

Setup 函数可将属性和方法返回到模板，在组件初始化的时候执行，其效果类似于Vue2中的beforeCreate 和 created。如果想使用setup里的数据，需要将值return出来，没有从setup函数返回的内容在模板中不可用。

Ref函数的作用是创建一个引用值，主要是对String、Number、Boolean的数据响应做引用。

相对于Vue2，Vue3的生命周期函数也发生了变更，如下所示：

· beforeCreate -> 请使用 setup()

· created -> 请使用 setup()

· beforeMount -> onBeforeMount

· mounted -> onMounted

· beforeUpdate -> onBeforeUpdate

· updated -> onUpdated

· beforeDestroy -> onBeforeUnmount

· destroyed -> onUnmounted

· errorCaptured -> Captured

需要注意的是，Vue2使用生命周期函数时是直接在页面中写入生命周期函数，而在Vue3则直接引用即可：

import {reactive, ref, onMounted} from 'vue'

3. Tree shaking support（按需打包模块）

有人将“Tree shaking” 称之为“摇树优化”，其实就是把无用的模块进行“剪枝”，剪去没有用到的API，因此“Tree shaking”之后，打包的体积将大幅度减少。

官方将Vue2和Vue3进行了对比，Vue2若只写了 Hello World，且没有用到任何的模块API，打包后的大小约为32kb，而Vue3 打包后仅有13.5kb。

4. 全新的脚手架工具：Vite

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

和 Webpack相比，具有以下特点：

· 快速的冷启动，不需要等待打包

· 即时的热模块更新

· 真正的按需编译，不用等待整个项目编译完成

由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。看来，连尤大神都难逃“真香”理论。

Vite究竟有什么魔力？不妨让我们通过实际搭建一款基于Vue3 组件的表格编辑系统，亲自体验一把。