【Vue】Vue2与Vue3的区别

响应式系统

• Vue2使用Object.defineProperty来实现响应式系统，这意味着只有预先声明的属性才会变为响应式的。对于未在初始化阶段声明的属性，不会自动追踪变化
• 而Vue3使用Proxy来实现响应式系统。Proxy比Object.defineProperty更强大，能处理更多的场景，并且性能更好。

组合式API

• Vue3引入了组合式API，将逻辑相关的代码封装到一个函数中，提高了代码的可读性和复用性。
• Vue3通过 setup() 函数使状态逻辑更模块化，便于复用和组织。这与Vue 2中的Options API形成对比，尽管Vue 3依然兼容Options API。
• Vue3新增了如 ref 和 reactive 之类的函数，用于创建响应式数据，以及 computed 和 watch 等函数来处理计算属性和副作用
• 而Vue2使用选项式API，需要将相同逻辑的代码散落在不同的选项中。

更小的体积

• Vue3的体积比Vue2更小，减少了约30%的大小。
• 这主要是通过移除了一些不常用的API和优化压缩算法来实现的。

编译优化

• Vue3的编译器进行了重写，实现了更好的编译优化，生成更小、更高效的代码。这使得Vue3在运行时有更好的性能表现。

新的生命周期钩子

• Vue 2 使用经典的生命周期钩子函数，如 beforeCreate, created, mounted, updated, beforeUpdate, beforeDestroy, 和 destroyed。
• Vue 3 优化了生命周期钩子，引入了一些新的名称，如 setup()、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onRenderTracked 和 onRenderTriggered。setup() 函数作为组件初始化的入口点，替代了之前的一些生命周期钩子。提供更细粒度的控制。

更好的性能

• Vue3的性能比Vue2更好，主要得益于编译优化、响应式系统的改进和更小的体积。

组件结构与模板

• Vue 3 支持 碎片（Fragments） 和 Teleport，碎片让组件可以返回多个根节点，而Teleport允许将组件内容插入到DOM的任意位置，这对于实现模态框、提示等非常有用。
• Vue 3 对模板语法进行了改进，提供了更灵活的 v-slot 语法来处理插槽。

Teleport

• Vue3引入了Teleport组件，用于在DOM中任意位置渲染组件，而不受父组件的限制。这在处理模态框等场景时非常有用。

Fragments

• Vue3支持Fragments，允许组价返回多个根节点。这在一些特殊布局场景中很有用。
• Vue3中，Fragment的写法从 <template> 改为了 <Fragment> 或者 <></>

静态节点标记

• Vue3中，编译器会对静态节点进行标记，以减少不必要的虚拟DOM的创建和比对，提高渲染性能。

异步组件

• Vue3中，异步组件的写法更加简洁明了，使用defineAsyncComponent方法来进行异步组件的定义。

Slots的改进

• Vue3中，Slots进行了改进，引入了v-slot指令替代Vue2中的slot和slot-scope，使得Slots的使用更加语义化和灵活。

更好的TypeScript支持

• Vue3对TypeScript的支持相比Vue2更加完善，提供了更好的类型推导和错误提示，使得开发者在使用TypeScript时更加顺畅。

Composition API的引入

• Vue3引入了Composition API，使得组件的代码更加清晰和组织化，提高代码的可读性和可维护性。

总体来说，Vue3相比Vue2在性能、开发体验、代码组织等方面都进行了一系列的优化和改进，使得开发者可以更加高效和轻松地开发Vue应用。