Vue2与Vue3主要差异

Vue2和Vue3在架构、API设计和性能优化等方面存在显著差异。Vue3引入了Composition API、响应式系统重构等新特性，同时优化了虚拟DOM和打包体积。以下从核心差异点展开详细对比。

响应式系统重构

Vue2使用Object.defineProperty实现响应式，存在无法检测数组/对象新增属性的限制：

// Vue2响应式示例
data() {
  return {
    obj: { a: 1 },
    arr: [1,2,3]
  }
},
mounted() {
  this.obj.b = 2 // 非响应式
  this.arr[3] = 4 // 非响应式
}

Vue3改用Proxy实现响应式，支持动态属性添加和数组索引修改：

// Vue3响应式示例
setup() {
  const state = reactive({
    obj: { a: 1 },
    arr: [1,2,3]
  })

  state.obj.b = 2 // 响应式
  state.arr[3] = 4 // 响应式
  return { state }
}

Composition API vs Options API

Vue2采用Options API组织代码：

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

Vue3引入Composition API实现逻辑复用：

// Vue3 Composition API
import { ref, computed } from 'vue'

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

    return { count, double, increment }
  }
}

生命周期变化

Vue3生命周期钩子调整：

• beforeCreate -> 使用setup()
• created -> 使用setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted

// Vue3生命周期示例
import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成')
    })
  }
}

模板语法差异

多根节点支持

Vue2要求单根节点：

<!-- Vue2模板 -->
<template>
  <div>
    <header></header>
    <main></main>
  </div>
</template>

Vue3支持多根节点：

<!-- Vue3模板 -->
<template>
  <header></header>
  <main></main>
</template>

v-model变化

Vue2的.sync修饰符被Vue3的多个v-model替代：

<!-- Vue2 -->
<ChildComponent :title.sync="pageTitle" />

<!-- Vue3 -->
<ChildComponent v-model:title="pageTitle" />

性能优化

虚拟DOM重写

Vue3的虚拟DOM生成速度提升：

• 编译时标记静态节点
• 事件缓存优化
• 区块树优化（Block Tree）

打包体积减小

Vue3通过Tree-shaking优化，核心库体积从Vue2的~20KB减小到~10KB。

TypeScript支持

Vue3使用TypeScript重写，提供更好的类型推断：

// Vue3 + TS示例
import { defineComponent } from 'vue'

interface State {
  count: number
}

export default defineComponent({
  setup(): { count: number; increment: () => void } {
    const count = ref<number>(0)
    
    const increment = () => {
      count.value++
    }

    return { count, increment }
  }
})

全局API变更

Vue2全局API挂载在Vue构造函数上：

// Vue2全局API
import Vue from 'vue'
Vue.component('MyComp', { /* ... */ })
Vue.directive('focus', { /* ... */ })

Vue3改为模块化导入：

// Vue3全局API
import { createApp } from 'vue'

const app = createApp({})
app.component('MyComp', { /* ... */ })
app.directive('focus', { /* ... */ })

自定义渲染器

Vue3提供自定义渲染器API，支持非DOM环境：

import { createRenderer } from 'vue'

const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  createElement
  // ...其他平台特定API
})

片段和传送

Vue3新增<Teleport>组件实现内容传送：

<template>
  <button @click="showModal">打开模态框</button>
  <Teleport to="body">
    <Modal v-if="isOpen"/>
  </Teleport>
</template>

异步组件改进

Vue3使用defineAsyncComponent定义异步组件：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

过渡动画类名变更

Vue3过渡类名更符合CSS规范：

• v-enter -> v-enter-from
• v-leave -> v-leave-from

/* Vue3过渡示例 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}