*Vue3和Vue2的主要区别包括性能提升、响应式原理、Composition API、生命周期钩子函数、TypeScript支持、虚拟DOM的灵活性、以及API的移除和添加。 *12
- 性能提升：Vue3引入了响应式系统的重大改进，使用Proxy代理对象替代了Vue2的defineProperty来追踪数据变化，提高了性能和效率。此外，Vue3还进行了其他性能优化，如静态提升和Hoist静态节点，以及Tree-shaking，从而减小了打包体积。
静态提升：指在编译器编译的过程中，将一些静态的节点或属性提升到渲染函数之外。
tree-shaking：是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。
- 响应式原理：Vue2使用Object.defineProperty()对数据进行劫持，结合发布订阅模式实现双向数据绑定。而Vue3使用ES6的Proxy API对数据进行处理，可以监听整个对象的变化，包括数组内部数据的变化，从而提高了效率和监听能力。
- Composition API：Vue3引入了Composition API，它是一种基于函数的API风格，允许开发者根据逻辑功能进行组织代码，使组件更加复用和可维护。相比Vue2的Options API，Composition API更加灵活和可维护。
- 生命周期钩子函数：Vue3对生命周期进行了一些调整和改进，引入了onBeforeMount和onBeforeUnmount等新的生命周期钩子函数。此外，Vue3的生命周期钩子在调用前需要先进行引入，除了这些钩子函数外，还增加了onRenderTracked和onRenderTriggered函数。
onUnmounted():注册一个回调函数，在组件实例被卸载之后调用。
onBeforeUnmount():注册一个钩子，在组件实例被卸载之前调用。
onRenderTracked():注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
onRenderTriggered():注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
onServerPrefetch():注册一个异步函数，在组件实例在服务器上被渲染之前调用。
- TypeScript支持：Vue3对TypeScript的支持更加友好，提供了更完善的类型推断机制，使得开发过程更加安全可靠。这包括更好的类型推导、更好的类型声明等。
- 虚拟DOM的灵活性：Vue3中的虚拟DOM相比Vue2更加灵活，可以手动标记和提升静态节点，从而减少不必要的DOM操作。这种改进使得Vue3在处理复杂应用时更加高效。
- API的移除和添加：Vue3移除了一些API，如keyCode作为v-on的修饰符、on、off和once实例方法、过滤filter、内联模板attribute、destroy实例方法等。同时，添加了一些新的API和功能，如支持碎片（Fragments）、更好的静态模板渲染等。
Fragments:Vue3中的Fragment是用来承载多个子元素的虚拟组件。它的作用是可以解决在Vue2中，使用v-for迭代元素时需要添加一个包装元素的问题。
Teleport：Vue3中的Teleport 是控制渲染位置的新指令。它的作用是在DOM中移动一个组件的内容而不改变组件的父级。
Suspense：Vue3中的Suspense是Vue3中新增的一个组件，它的作用是实现延迟加载和错误处理。在组件中加入Suspense，可以让异步组件可以渲染出加载状态，并且如果异步组件加载时出现错误，也能够处理这些错误。
- hooks添加：自定义方函数。
综上所述，Vue3相较于Vue2在性能、响应式原理、API风格、生命周期管理、TypeScript支持、虚拟DOM灵活性等方面都有显著的提升和改进。
