Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解

Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解

一、架构层面的重大变化

1. 响应式系统重写

	Vue 2 (Object.defineProperty)	Vue 3 (Proxy)
检测原理	递归遍历对象属性逐个劫持	代理整个对象
数组支持	需要特殊处理数组方法	原生支持
性能影响	初始化时递归性能消耗大	按需代理
新增属性	需要Vue.set	直接响应

示例：

// Vue 2
this.$set(this.obj, 'newProp', value)

// Vue 3
this.obj.newProp = value // 自动响应

二、Composition API（组合式API）

1. 核心函数对比

选项式API (Vue2)	组合式API (Vue3)	作用
data()	ref()/reactive()	响应式数据
methods	普通函数	方法定义
computed	computed()	计算属性
watch	watch()/watchEffect()	侦听器
mounted	onMounted()	生命周期

示例：

// Vue 2
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// Vue 3
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}

三、性能优化提升

1. 编译时优化

优化点	Vue 2	Vue 3
虚拟DOM	全量比较	静态标记(PatchFlag)
静态提升	无	静态节点提升到render函数外部
事件缓存	无	缓存事件处理函数
Tree-shaking	支持有限	按需引入核心功能

编译结果对比：

// Vue 2生成的渲染函数
function render() {
  with(this) {
    return _c('div', [_v("Hello "+_s(name))])
  }
}

// Vue 3生成的渲染函数
import { createVNode as _createVNode } from "vue"
const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "static content", -1 /* HOISTED */)

function render() {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _createVNode("p", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ]))
}

四、TypeScript支持

1. 类型系统改进

特性	Vue 2支持度	Vue 3支持度
组件Props类型	有限	完整
模板类型检查	无	实验性支持
Composition API	无	完整类型
JSX支持	一般	完善

类型定义示例：

// 定义组件Props类型
interface Props {
  title: string
  count?: number
}

// 使用泛型定义组件
defineComponent<Props>({
  props: {
    title: String,
    count: Number
  },
  setup(props) {
    // props自动推断类型
    const doubled = computed(() => props.count * 2)
    return { doubled }
  }
})

五、新组件和API

1. 新增内置组件

组件	作用	替代方案(Vue2)
<Teleport>	传送组件到DOM其他位置	portal-vue库
<Suspense>	异步组件加载状态管理	自行实现
<Fragment>	多根节点组件	必须单根节点

2. 新响应式API

import { 
  ref,         // 基本类型响应式
  reactive,    // 对象响应式
  computed,    // 计算属性
  watch,       // 侦听器
  watchEffect, // 自动依赖收集的侦听
  readonly,    // 只读代理
  shallowRef,  // 浅层ref
  toRef,       // 保持响应式连接
  toRefs       // 解构保持响应式
} from 'vue'

六、生命周期变化

1. 生命周期对照表

Vue 2	Vue 3 (Composition API)	变化说明
beforeCreate	不再需要(直接setup)	被setup替代
created	不再需要(直接setup)	被setup替代
beforeMount	onBeforeMount	名称变更
mounted	onMounted	名称变更
beforeUpdate	onBeforeUpdate	名称变更
updated	onUpdated	名称变更
beforeDestroy	onBeforeUnmount	更准确的命名
destroyed	onUnmounted	更准确的命名
errorCaptured	onErrorCaptured	名称变更
-	onRenderTracked	新增调试钩子
-	onRenderTriggered	新增调试钩子

七、其他重要改进

1. 全局API修改

Vue 2	Vue 3
Vue.prototype	app.config.globalProperties
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
new Vue()	createApp()

应用初始化对比：

// Vue 2
const app = new Vue({...})
app.$mount('#app')

// Vue 3
import { createApp } from 'vue'
const app = createApp({...})
app.mount('#app')

2. 自定义渲染器API

import { createRenderer } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  // 自定义节点操作
  insert: (child, parent) => {
    // 非DOM环境的渲染逻辑
  }
})

八、迁移建议

1. 渐进式迁移：

   • 使用@vue/compat构建兼容版本
   • 逐步替换废弃API

2. 优先采用的新特性：

   • ✅ Composition API (复杂逻辑组织)
   • ✅ <script setup>语法糖
   • ✅ 更灵活的组件(多根节点)
   • ✅ Teleport组件(模态框/弹窗)

3. 需要谨慎使用的特性：

   • ⚠️ Fragments (可能影响样式作用域)
   • ⚠️ Suspense (异步组件边界处理)
   • ⚠️ 深度响应式转换(性能敏感场景)