今天在b站看到一段尤雨溪大佬的视频，主要是聊了聊vue3对于vue2进行了哪些改变，然后就去官网和论坛上看了一些关于两者的区别，这里简单记录一下。

1. 文件结构

分别创建vue2和vue3的工程后会发现，文件结构发生了一些简单的改变。

vue3的index.html文件放在根目录下；Vite项目的默认配置文件是vite.config.js，而不是vue.config.js。

vue2

vue3

2. vite --- 构建工具

vue3中除了可以使用传统的vue-cli创建工程，还可以使用全新的Web开发构建工具--vite，他的作用和类似于webpack，但是效率要远远高于webpack，且打包之后的体积要比webpack小很多。

vue2 --- webpack

vue3 --- vite

为什么vite的效率能够这么高呢？其中一点原因是：vite在浏览器环境下解析import依赖，服务器按需编译返回。也就是说页面展示哪些内容服务器给你哪些内容，无关的根本不搭理。

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题 --- 尤雨溪 网上看到的一张图

3. Vue构造函数

vue2

vue3

vue3移除了Vue构造函数，不再是通过new Vue来创建实例，而是使用createApp方法，并且不再是直接返回一个实例，而是一个Proxy，通过代理的方式操作属性。
使用插件： 利用createApp(App).use()来使用第三方插件，不再是Vue.use()

4. 模板的根元素

vue3中模板的根元素不再强制要求只能是一个，可以是多个根元素。

5. Options api（vue2） 和 Composition api（vue3）

嗯，这块内容了解的不是很清楚，但是尤雨溪在视频中说的话记得很清楚，vue3最重要的新功能就是Composition api。 vue2的Options api：我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑,这种方式称之为Options api。
缺点：一个功能需要在vue的不同配置项中定义属性或者方法，该功能所需的模块比较分散，在大项目中很难分清data中的属性或者methods中的方法都是对应哪些功能的。

vue3出现的Composition api就是用来解决这样的问题。通过功能来组织代码，将一个功能的属性和方法等放在一起，这样可以快速定位某个功能的所用到的所有api，提供代码可维护性。
下面是一个小例子：

setup会在所有生命周期函数之前运行；ref方法将数据变为响应式；模板中可以直接使用数据名，但是在setup函数内部要访问数据的值，要通过数据名.value。

描述的有点不清不楚，但是今天看到视频后就想了解一下vue2和vue3的区别，并简单的做一下记录，两者的区别还有很多，今天只了解到这些，后续学习了vue3有了更多的了解会补上。

欢迎评论区交流讨论。