一，核心架构
| 特性 | 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）
核心特点 - 组件是通过 对象选项 定义的。
- 逻辑按功能分类写在不同选项里：
data → 数据状态
methods → 方法
computed → 计算属性
watch → 监听器
mounted / created → 生命周期钩子
// 定义 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 的组件定义方式
(1）保留 Options API
(2）新增 组合式 API（Composition API）
<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 计算 |
