Vue2和3有什么区别

CMA

Vue3新增composition Api，函数式编程

setup函数在生命周期中处于beforeCreate和created中间

setup函数接受props和context两个属性，同时该函数需要返回一个对象

TIP

Vue3.2新增script setup，无需再return一个对象，组件也无需注册可直接使用

创建实例方式不同

Vue2在main文件中，直接引入new一个Vue类即可

Vue3需要使用createApp创建实例

数据变量定义不一样

在OptionApi中，变量数据需要定义在data中

在CMA中，需要使用ref或reactive定义响应式数据

props和emit

在Vue2中直接使用this即可直接获取到props和emit对象

而在Vue3需要使用宏函数defineProps和defineEmits，先声明后使用

响应式方案不同

Vue2：Object.definePropertyVue3: Proxy和reflect

Vue2中Object.defineProperty无法完成对数组方法的监听，所以Vue2还重写了Array中的方法

除了这个，如果直接向data设置一个新的属性，是无法被监听到的

这时候Vue提供了$set方法设定一个新的响应式数据

Vue3新增组件

Fragment

Vue2中的组件必需要一个根标签，而Vue3不需要，如果有多个根组件时，Vue3会包裹一个Fragment虚拟元素（只处理节点中的children）

teleport

用于将指定元素传送（移动）到某个位置

很典型的一个例子，在Vue2中如果要在页面中显示弹窗的话，遮罩层和弹窗位置可能会受当前页面布局的影响，会导致样式问题

有了teleport之后，将弹窗元素直接移动到body下面，就不会受到当前页面布局影响

Suspense

用于等待异步组件时，渲染一些额外的内容，例如Loading，让用户使用体验更好