一，核心架构 特性 Vue 2 Vue 3 说明 虚拟 DOM Vue 2 使用普通 VNode Vue 3 重写 VNode 和渲染器 Vue 3 性能更高，支持更复杂场景 响应式系统 基于 Object.defineProperty 基于 Proxy Vue 3 能完整监听对象新增/删除属性，性能更好 Tree-shaking 不完全支持 完全支持 Vue 3 支持按需打包，减小体积 TypeScript 支持不够完善 完全重写以支持 TS Vue 3 更友好支持 TS 开发
新增对象属性 情况下，Vue 2需 Vue.set 才更新，Vue 3天然响应式，自动更新。JavaScript 是 浏览器和 Node.js 支持的脚本语言，用于网页交互、前端逻辑和服务器端开发。动态类型语言，变量类型在运行时确定。
TypeScript 是 JavaScript 的超集，由微软开发。本质上是 在 JS 基础上增加静态类型系统 和一些新语法。TS 需要 编译成 JS 才能运行。
静态类型（可选）:编译阶段检查类型，提前发现错误 支持接口和类型别名 支持泛型 兼容 JS 特性 JavaScript TypeScript 类型 动态类型 静态类型（可选） 错误发现 运行时 编译时 编译 不需要 需要编译成 JS 开发体验 普通编辑器支持 类型提示、智能补全、重构安全 大型项目 容易出错 更易维护，适合团队开发 新语法 ES6/ESNext 支持 ES6/ESNext + TS 类型系统、接口、泛型
Proxy是什么？ Proxy 是 ES6（ES2015）新增的一个对象
Proxy 并不是单纯给对象“添加方法”，而是创建一个代理对象，拦截对原对象的操作 。
它会“监控 ”对目标对象的操作**（读取、修改、删除、属性检测等），并在操作发生时执行 自定义逻辑**。
这个代理对象本身和原对象保持关联，操作代理对象会作用到原对象上 。
Proxy = 对对象的一层“拦截层”或“中间层”，可以在操作对象时自定义行为
const target = { name: 'Alice' , age: 20 } ;
const proxy = new Proxy( target, {
get( obj, prop) {
console.log( ` 访问了属性: ${ prop} ` ) ;
return obj[ prop] ;
} ,
set( obj, prop, value) {
console.log( ` 修改了属性: ${ prop} = ${ value} ` ) ;
obj[ prop] = value;
return true ; // 必须返回 true 表示设置成功
}
} ) ;
proxy.name; // 控制台：访问了属性: name
proxy.age = 21 ; // 控制台：修改了属性: age = 21 Proxy 的组成： 名称 说明 target 被代理的对象，即原始对象 handler 一个对象，定义拦截操作的函数（称为 trap ） trap 拦截操作的方法，例如 get、set、deleteProperty、has、ownKeys 等
Trap 功能 get读取属性时触发 set设置属性时触发 deleteProperty删除属性时触发 has检查对象中是否有某属性（in 操作符）触发 ownKeys获取对象所有属性（Object.keys、for...in）触发
实际应用示例（Vue 3 响应式） import { reactive } from 'vue' ;
const state = reactive( { count: 0 } ) ;
// Vue 内部就是 Proxy
state.count = 1 ; // 自动触发更新
state.newProp = 'hello' ; // 新增属性也会响应式
delete state.count; // 删除属性也触发响应二，组件 API 特性 Vue 2 Vue 3 说明 组件定义方式 选项式 API（Options API）为主 Options API + 组合式 API（Composition API） Composition API 更灵活，适合大型应用和逻辑复用 生命周期钩子 created, mounted, updated 等保留 Options API，Composition API 用 onMounted、onUpdated 等 Composition API 统一函数式钩子，更模块化 provide/inject 有限支持 完整支持，支持响应式 可以更方便地跨组件 传递响应式数据 异步组件 Vue.component('comp', () => import())改进异步组件机制，支持 Suspense 更容易处理异步加载和占位显示
Vue 2 的组件定义方式 — 选项式 API（Options API）组件是通过 对象选项 定义的。 逻辑按功能分类写在不同选项里： // 定义 Vue 2 组件
export default {
name: 'MyComponent' ,
data ( ) {
return {
count: 0
} ;
} ,
computed: {
double ( ) {
return this.count * 2 ;
}
} ,
methods: {
increment ( ) {
this.count++;
}
} ,
mounted ( ) {
console.log( '组件挂载完成' ) ;
}
} Vue 3 的组件定义方式 < script setup lang = "ts" > import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue' // 组件名称defineOptions( { name: 'MyFullExample' } ) // Propsconst props = defineProps< { msg: string} > ( ) // Emitconst emit = defineEmits< { ( e: 'update' ) : void} > ( ) // 响应式状态const count = ref( 0 ) const inputValue = ref( '' ) // 响应式对象const state = reactive( { items: [ 'Apple' , 'Banana' , 'Orange' ] ,showText: true } ) // 计算属性const double = computed(( ) = > count.value * 2 ) const title = computed(( ) = > ` Hello, Vue 3 < script setup> ! Count: ${ count.value} ` ) // 方法function increment ( ) { count.value++} function notifyParent ( ) { emit( 'update' ) } // Watchwatch( inputValue, ( newVal, oldVal) = > { console.log( ` Input changed: ${ oldVal} -> ${ newVal} ` ) } ) // 生命周期钩子onMounted(( ) = > { console.log( 'Component mounted!' ) } ) onBeforeUnmount(( ) = > { console.log( 'Component will unmount!' ) } ) // 解构 state 中的值const { items, showText } = state< /script> 特性 Vue 2 Options API Vue 3 Composition API 组件定义 对象选项（data/methods/computed/watch） setup() + ref/reactive/computed 逻辑组织方式 按功能分类 按功能组合，逻辑聚合在一起 逻辑复用 mixins（可能冲突） Composable 函数，易复用 响应式管理 自动 this 绑定 ref/reactive 显式管理 学习曲线 简单直观 稍复杂，但更灵活
三，模板和指令 特性 Vue 2 Vue 3 说明 v-model 只支持单个 prop 和事件 支持多 v-model，可自定义 prop/event 绑定更灵活 Fragment 不支持多根节点 支持多根节点（Fragment） 可以直接返回多个根节点，不用包一层 div Teleport 无 新增 Teleport 组件 支持把 DOM 元素传送到页面任意位置 Suspense 无 新增 Suspense 组件 用于异步组件加载占位显示
特性 Vue 2 Vue 3 说明 响应式实现 Object.defineProperty Proxy 更完整、性能更高，支持动态添加/删除属性 性能 中等 更高，虚拟 DOM 重写 + 编译优化 组件初始化和更新速度更快 watch/computed Options API Options API + Composition API Composition API 中可以直接用 watch 或 computed 钩子
特性 Vue 2 Vue 3 说明 虚拟 DOM 基础优化 Patch 算法重写，更高效 更新大列表性能提升明显 Tree-shaking 部分支持 完全支持 打包更小 静态提升 无 模板静态提升 静态节点不重复渲染，性能更好 编译器优化 基本 静态标记 + 动态节点优化 减少不必要的 diff 计算