vue2和vue3的主要区别在于以下几点：
1、生命周期函数钩子不同
2、数据双向绑定原理不同
3、定义变量和方法不同
4、指令和插槽的使用不同
5、API类型不同
6、是否支持碎片
7、父子之间传参不同
8、main.js文件中部分设置不同
一、生命周期函数钩子不同
| vue2 | vue3 |
| beforeCreate 组件创建之前 created 组件创建之后 |
setup 开始创建组件 |
| beforeMount 组件挂载到页面之前执行 | onBeforeMount 组件挂载到页面之前执行 |
| mounted 组件挂载到页面之后执行 | onMounted 组件挂载到页面之后执行 |
| beforeUpdate 组件更新之前 | onBeforeUpdate 组件更新之前 |
| updated 组件更新之后 | onUpdated 组件更新之后 |
注意：vue3.x生命周期在调用前 需要先引入。除上述的钩子函数外，还增加了onRenderTracked和onRenderTriggered。
二、数据双向绑定原理不同
| vue2 | vue3 |
| 用ES5的API Object.defineProperty() 对数据进行劫持， 结合发布者订阅者模式的方式来实现的。 |
使用了ES6的Proxy API对数据代理。 |
vue3提供的proxy API代理的优势在于：
三、定义变量和方法不同
| vue2 | vue3 |
| 在data中定义变量，在methods中创建方法 | 使用一个新的setup方法 |
vue3提供的setup方法在组件初始化构造的时候触发，使用以下三个步骤建立反应性数据：
四、指令和插槽的使用不同
| vue2 | vue3 |
|
不建议将v-for和v-if写在一起使用 允许直接使用slot |
将v-if当作v-for大的一个判断语句，不会相互冲突 移除keyCode作为v-on的修饰符，不支持config.keyCodes 移除v-on.native修饰符 移除过滤器filter 不允许直接使用slot，正确格式为 v-slot |
五、API类型不同
| vue2 | vue3 |
|
选项型api （在代码中分割不同属性：data，computed，methods等） |
组合型api （使用方法进行分隔，显得更加简便整洁） |
六、是否支持碎片
| vue2 | vue3 |
| 否 | 是，即可以拥有多个根节点 |
七、父子之间传参不同
| vue2 | vue3 |
|
父传子： 子组件通过prop接收 子传父： 子组件中通过$emit向父组件触发一个监听方法，传递一个参数 |
使用setup()中的第二个参数content对象中有emit，只需要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。 |
八、main.js文件不同
| vue2 | vue3 |
| 使用prototype（原型）的形式进行操作，引入的是构造函数 | 需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没用根标签 |
