不一样的邂逅——初识Vue3

• 1、初识Vue3
• 2、Vue3提升了什么
• • 2.1、性能的提升
  • 2.2、源码的升级
  • 2.3、拥抱TypeScript
  • 2.4、新的特性
• 3、创建Vue3项目
• • 3.1、使用脚手架进行创建
  • 3.2、使用vite进行创建
  • 3.3、拓展——vite与webpack对比
• 4、Vue3项目结构

1、初识Vue3

在熟悉一个项目我们首先是了解其官网、github、npm，首先我们先浏览一下Vue3的github Vue-3 Github

Vue3.0 版本代表了 2 年多的开发工作，包括 30+ RFC、2，600+ 提交、来自 628 个贡献者的 99 个拉取请求，以及核心存储库之外的大量开发和文档工作。我们要对接受这一挑战的团队成员、拉取请求的贡献者、赞助商和支持者的财务支持以及更广泛的社区参与我们的设计讨论并为预发布版本提供反馈表示最深切的感谢。Vue 是为社区创建并由社区维护的独立项目，如果没有您的持续支持，Vue 3.0 是不可能的。

2、Vue3提升了什么

2.1、性能的提升

• 打包大小减少41%
• 初次渲染快55%，更新渲染快133%
• 内存减少54%

2.2、源码的升级

• 使用Proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现和Tree-Shaking

2.3、拥抱TypeScript

• Vue3可以更好的支持TypeScript，对于TypeScript可参考本文：TypeScript详解

2.4、新的特性

1. Composition API（组合API）
   • setup配置、ref与reactive、watch与watchEffect、provide与inject
2. 新的内置组件
   • Fragment、Teleport、Suspense
3. 其他改变
   • 新的生命周期钩子、data 选项应始终被声明为一个函数、移除keyCode支持作为 v-on 的修饰符

3、创建Vue3项目

3.1、使用脚手架进行创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create web-vue3
## 启动
cd web-vue3
npm run serve

3.2、使用vite进行创建

vite官网：https://vitejs.cn

我们知道现存的打包构建工具都是采用的webpack，而这里使用的Vite就是用来对标webpack的，虽然现在还不足以撼动webpack的地位,但是未来的发展谁都不可预测，首先我们先看一下vite构建打包相对于webpack的优点，而对于weback打包配置可以参考：webpack5 打包工具 详解

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载（HMR）。
• 真正的按需编译，不再等待整个应用编译完成。

npm init vite-app web-vite-vue3
cd web-vite-vue3
npm i
npm run dev

3.3、拓展——vite与webpack对比

这里直接从对应的官网上获取其打包的一个说明流程图

• webpack：对于webpack来说，首先是通过对应的入口进行设置需要打包的资源，将资源打包完成之后再启动一个服务器提供访问
• vite：对于vite的话是直接启动一个服务器不进行编译打包，后续再进行访问对应的页面再进行编译

总结： 在第一次启动项目的时候vite是比webpack块的多的，而后续页面重新编译渲染webpack更有优势

4、Vue3项目结构

Vue3的项目结构与Vue2的项目结构基本保持一致未发生大规模的改变