Vue 2 和 Vue 3 区别

1. 响应式系统原理

• Vue 2：利用Object.defineProperty()实现属性拦截。存在局限性，无法自动监测对象属性增减，需用Vue.set/delete；数组变异方法要重写；深层对象递归转换性能差。
• Vue 3：采用 ES6 Proxy代理对象，能直接拦截属性访问修改。无需特殊 API 就能监测属性变化；数组操作拦截更自然；深层响应式惰性处理，提升性能。

  javascript

  // Vue 3响应式创建
  import { reactive } from 'vue';
  const state = reactive({ count: 0 });
  state.count = 1; // 修改触发更新
  

2. 组件 API 风格

• Vue 2：以选项式 API 为主，通过data、methods、computed等选项组织代码，大型组件易出现逻辑分散问题。
• Vue 3：主推组合式 API，使用setup()函数或

3. 生命周期钩子

• Vue 2：钩子顺序为beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed。
• Vue 3：保留多数钩子但调整命名，beforeCreate与created整合到setup()，beforeDestroy改为beforeUnmount，destroyed改为unmounted。在组合式 API 中这样使用：

  javascript

  import { onMounted, onBeforeUnmount } from 'vue';
  setup() {
    onMounted(() => { /* ... */ });
    onBeforeUnmount(() => { /* ... */ });
  }
  

4. 模板编译优化

• Vue 2：模板编译生成整体式渲染函数，更新时遍历整个虚拟 DOM 树，静态节点也参与 diff 比较，影响性能。
• Vue 3：编译时标记静态节点（hoistStatic），避免重复创建比较；动态绑定属性标记为PatchFlag，只对比变更部分。

  html

  
    静态文本 
    动态文本 
  
  

5. 虚拟 DOM 实现

• Vue 2：基于 JavaScript 对象，创建和 diff 算法简单，性能受限。
• Vue 3：采用Proxy-based虚拟 DOM，减少内存占用；静态提升复用静态节点；双端 diff 算法高效比较子节点列表，降低 DOM 操作次数。

6. 多根节点组件

• Vue 2：组件模板必须有单个根节点，否则报错。
• Vue 3：支持多根节点（Fragment），无需额外包裹元素。

  vue

7. 其他特性

• TypeScript 支持：Vue 3 设计更适配 TypeScript，组合式 API 减少类型声明冗余。
• 自定义渲染器：Vue 3 核心库轻量，可通过@vue/runtime-core创建自定义渲染器（如渲染到 Canvas、WebGL）。
• Teleport（传送门）：新增组件，支持将内容渲染到 DOM 其他位置（如模态框）。
• Suspense（异步组件）：原生支持异步组件与等待状态，简化异步加载逻辑。