Vue2和vue3的区别（前端面试常见问题）

1.Api的变化：vue3使用组合式Api（compostion Api）和Vue2是选项式Api（options Api）。选项式Api具有data ，watch，methods，computed，一个个的模块。如果代码过多可读性会很差。并且代码的逻辑要分别写在这几个模块中，逻辑分散。vue3组合式Api代码逻辑相同的可以写在一起，方便阅读和维护。

2.生命周期：vue3的生命周期在Vue2的基础上前面加上on。但是去掉了beforeCreate和created，使用setup代替。beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted。并且vue3的生命周期必须先引入才能使用

3.响应式：Vue2是利用object.definedProperty来对数据对象进行劫持。通过obsever对数据对象进行遍历给他们加上geter和setter方法。当数据发生改变就会触发setter方法，用compile对模板进行编译然后渲染到视图。利用watcher连接compile和observe。达到数据变化，视图更新。视图交互变化数据改变。vue3是利用es6的proxy对数据进行代理。通过proxy对数据进行包装。初始化时创建一个原始数据对象raw并利用proxy对他进行代理。到通过raw调用这个对象的属性时就会触发get函数。修改这个对象时就会触发set函数。这样无论是调用还是修改都会被检测到。实现对数据的追踪和更新。解决vue2无法通过下标修改数组的问题和无法检测到对象的属性的问题

4.Vue2只能有一个根节点。当有多个根节点的时候会报错。但vue3可以有多个根节点也就是所谓的fragement

5.vue3打包的体积更小。因为使用了treeshaking。移除了上下文未使用的代码

6.vue3对ts能有更好的支持。

7.vue3新增了teleport组件 ，使组件能够脱离他的层级限制，挂载到指定的dom节点上。