Vue 2 和 Vue 3 的核心区别 • glownight

Vue 2 vs Vue 3 核心区别#

	Vue 2	Vue 3
响应式	`Object.defineProperty`	`Proxy`
新增属性	需 `Vue.set`	自动响应
数组索引	检测不到	原生支持
API 风格	Options API	Options + Composition API
逻辑复用	Mixins（易冲突）	Composables（清晰）
TypeScript	支持差	原生支持
性能	初始化递归遍历	懒代理，更快
Tree-shaking	差	更好（按需编译）
多根节点	❌ 单根	✅ 多根 `<template>`
Teleport	❌	✅
Suspense	❌	✅

代码对比#

响应式#

// Vue 2
Vue.set(obj, 'newKey', value);  // 新增属性需特殊方法
arr[0] = 1;  // 检测不到

// Vue 3
obj.newKey = value;  // 直接赋值，自动响应
arr[0] = 1;  // 正常检测

javascript

API 风格#

// Vue 2: Options API
export default {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; } },
  computed: { double() { return this.count * 2; } }
};

// Vue 3: Composition API
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    const increment = () => count.value++;
    
    return { count, double, increment };
  }
};

javascript

一句话#

Vue 3 = Proxy 响应式 + Composition API + 更好的 TS 支持 + 新特性（Teleport/Suspense）