Vue3 和 Vue2 的区别？

（一）API

Vue2 ：选项式 API，实现一个功能涉及的数据、方法、计算属性，分散在不同的地方。

开发的功能比较多时，代码查看和修改起来不方便。

例如总共800行代码，功能A只有100行，但比较分散。因为数据要放在data里面，方法要放在methods里面，计算属性要放在computed里面，监听部分要放在watch里面。

当操作功能A的代码时可能要在这800行代码间不停来回跳，查找麻烦。

                               

Vue3：组合式API，实现一个功能涉及的数据、方法、计算属性，都放在同一个的地方。

底层逻辑是将实现一个功能涉及的数据、方法、计算属性等模块，全部封装到一个函数里面了。到时候哪个页面要复用，直接去调就可以了，特别方便。

尽管有800行代码，但功能A只涉及100行，且都紧挨着存放在一块儿。操作功能A的代码时，只需要在这紧挨着的100行里面查找就可以了，其他700行不用管，整体方便多了。

（二）脚手架工具

Vue2：采用Vue-Cli 脚手架，底层构建工具是webpack。

Vue3：采用create-vue脚手架，底层构建工具是vite。

无论是构建项目、安装依赖还是运行项目，vite的整体速度都远远快于webpack。

（三）项目目录和关键文件

1. 新构建的项目框架文件中，底部的项目配置文件（名字不一样，功能一样）

Vue2：vue.config.js

Vue3：vite.config.js

2.  项目包文件 package.json

Vue2：核心依赖项为vue2.x和vue-cli

Vue3：核心依赖项变成了vue3.x和vite

3. 入口文件 main.js：

Vue2：采用new Vue( ) 创建应用实例

【 PS：图解为什么可以简写为render：h=>h（App） 】

Vue3：采用createApp 函数创建应用实例

4. VSCode插件不同

Vue2：安装Vetur插件

Vue3：安装Vue Language Feature插件

5. 根组件App.vue 

Vue2：1）根组件的文件顺序由上至下依次为：模板template、脚本script 、样式style。

            2）模板template 要求唯一根元素。

            3）脚本script 标签什么都不用添加。

Vue3：1）根组件的文件顺序由上至下依次为：脚本script 、模板template、样式style。

            2）模板template 不要求唯一根元素。

            3）脚本script 标签需要添加 setup 标识，用来支持组合式API。

            注！！

            Vue3中的 setup选项 是在beforeCreate生命周期之前执行，

            此时组件实例还没有创建，获取不到this，所以this指向是undefined！！

            所以我们一般不在script脚本里面使用this。

6. 单页入口 indext.html

Vue2：提供id 为app的挂载点，通过App.vue提供渲染。

Vue3：提供id 为app的挂载点，将来main.js中创建出的结构就在这里挂载。