请简单叙述Vue2和Vue3的区别和变化

1.数据绑定的原理发生变化

vue2 的双向数据绑定是利用了 es5 的一个 API Object.definepropert() 对数据进行劫持 结合发布
订阅模式来实现的。vue3中使用了es6的 proxyAPI 对数据进行处理。

2.vue3支持碎片化

减少标签层级, 减小内存占用

3.composition API

Vue2 与vue3 最大的区别是vue2使用选项式api，对比vue3组合式api。旧得选项型api在代码里分割了
不同得属性：data,computed,methods等；新得合成型api能让我们使用方法来分割，相比于旧的API使
用属性来分组，这样代码会更加简便和整洁。这种就叫做组合式Api，这样可以将同一逻辑的内容写到一
起。

4.建立数据的data

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触
发。使用以下三步来建立反应性数据： 1. 从vue引入reactive；2.使用reactive() 方法来声明数据为响应
性数据；3. 使用setup()方法来返回我们得响应性数据，从而template可以获取这些响应性数据。

5.生命周期的变化

beforeCreate→setup
Created→setup
beforeMount→onBeforeMount
mounted→onMounted
beforeUpdate→onBeforeUpdate
updated→onUpdated
beforeDestory→onBeforeUnmount
destoryed→onUmmounted
errorCaptured→onErrorCaptured
新增的两个生命周期（onRenderTracked onRenderTriggered）

父子传参不同，setup()函数特性

setup函数接受两个参数：props、context(包含attrs、slots、emit)
父传子的时候，用props,子传父用事件emitting events.但是在vue2中会调用this.$emit然后传入事件名称和对象；在vue3中setup中得到的第二个参数就是content对象中就有emit
setup函数只能是同步的不能是异步的
因为执行setup的时候，组件还没有被创建，所以setup中没有this指向的问题
setup函数是出于生命周期beforeCreate和created两个钩子之前

webpack和vite区别

• vue2使用webpack形式去进行构建项目
  【webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好了可以开始干了】
• vue3使用vite构建项目
  【先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，Dynamic import（动态导入）code split point***（代码分割）】
  【最大的好处和区别就是为了让项目中一些代码文件多了以后去保存更新数据时更快能够看到实际效果，也就是所谓的（热更新）*】

main.js文件

• vue2中我们可以使用prototype(原型)的形式去进行操作，引入构造函数
• vue3中使用结构的形式进行操作，引入的是工厂函数
• vue3中的app组件中可以没有根标签

vue3中的Teleport瞬移组件

也就是说独立组件，组件挂载到任何你想挂载的dom上，所以是很自由很独立的