vue2 与 vue3 区别

Vue 2 和 Vue 3 的区别主要包括但不限于以下几个核心方面：

1. 响应式系统：

   • Vue 2 使用 Object.defineProperty() 钩子来实现对数据对象属性的 getter 和 setter 进行拦截，从而实现双向数据绑定和视图更新。
   • Vue 3 则使用了 ES6 的 Proxy 对象来代理整个数据对象，提供更透明且完整的响应式机制。相比于 Vue 2，Vue 3 的响应式系统可以更好地处理数组变化，并且能监听到深层次的对象属性变化。

2. API 设计与组件选项：

   • Vue 2 采用的是基于选项（Options API）的设计模式，包含如 data, methods, computed, watch 等选项。
   • Vue 3 引入了 Composition API，它允许开发者以更加灵活和可复用的方式组织逻辑，主要通过 setup() 函数来取代部分原有的选项，提供了 ref、reactive、computed、watchEffect 等新的 API 来管理状态和副作用。

3. Fragment 和 Teleport 组件：

   • Vue 2 不支持在同一模板中渲染多个根节点（即不支持片段），而 Vue 3 引入了 <Fragment>，允许在一个组件中返回多个顶级元素。
   • Vue 3 新增了 <Teleport> 组件，可以将组件内容渲染到 DOM 中指定的目标位置，比如一个 modal 或 tooltip 可以被“传送”到 body 结尾。

4. 生命周期钩子：

   • Vue 3 对生命周期钩子进行了调整和优化，移除了 beforeDestroy 和 destroyed，引入了 beforeUnmount 和 unmounted；同时添加了 onMounted、onUpdated 和 onBeforeUnmount 等新钩子函数。

5. 性能提升：

   • Vue 3 在编译器层面做了大量优化，提升了运行时性能，减小了体积，同时也提高了类型推断能力，便于 TypeScript 用户编写代码。

6. 脚手架工具改进：

   • Vue CLI 创建项目时，Vue 3 版本的项目生成器提供了更多的灵活性和高级功能，比如可视化创建配置和更好的默认插件集成。

7. 目录结构与构建流程：

   • 虽然这不是框架本身的变化，但随着 Vue 3 的推出，社区推荐的项目结构也有所改变，例如使用单文件组件 (SFC) 时增加了 <script setup> 特性，简化了组件内的脚本编写方式。

总结来说，Vue 3 在保持易用性的基础上增强了框架底层的性能和灵活性，同时也为大型应用开发提供了更强大的工具链和更先进的编程模型。