首页/资讯中心/详情

详细介绍：Vue 2 和 Vue 3 的区别

详细介绍：Vue 2 和 Vue 3 的区别
📅 发布时间：2026/6/19 22:15:42

一，核心架构

特性Vue 2Vue 3说明
虚拟 DOMVue 2 使用普通 VNodeVue 3 重写 VNode 和渲染器Vue 3 性能更高，支持更复杂场景
响应式系统基于 Object.defineProperty基于 ProxyVue 3 能完整监听对象新增/删除属性，性能更好
Tree-shaking不完全支持完全支持Vue 3 支持按需打包，减小体积
TypeScript支持不够完善完全重写以支持 TSVue 3 更友好支持 TS 开发
  • 新增对象属性情况下，Vue 2需 Vue.set 才更新，Vue 3天然响应式，自动更新。

TypeScript/JavaScript的区别？

  1. JavaScript 是 浏览器和 Node.js 支持的脚本语言，用于网页交互、前端逻辑和服务器端开发。动态类型语言，变量类型在运行时确定。

  2. TypeScript 是 JavaScript 的超集，由微软开发。本质上是 在 JS 基础上增加静态类型系统 和一些新语法。TS 需要 编译成 JS 才能运行。

特性JavaScriptTypeScript
类型动态类型静态类型（可选）
错误发现运行时编译时
编译不需要需要编译成 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
  1. Proxy 的组成：
名称说明
target被代理的对象，即原始对象
handler一个对象，定义拦截操作的函数（称为 trap）
trap拦截操作的方法，例如 get、set、deleteProperty、has、ownKeys 等
Trap功能
get读取属性时触发
set设置属性时触发
deleteProperty删除属性时触发
has检查对象中是否有某属性（in 操作符）触发
ownKeys获取对象所有属性（Object.keys、for...in）触发
  1. 实际应用示例（Vue 3 响应式）
import { reactive } from 'vue';
const state = reactive({ count: 0 });
// Vue 内部就是 Proxy
state.count = 1;         // 自动触发更新
state.newProp = 'hello'; // 新增属性也会响应式
delete state.count;       // 删除属性也触发响应

二，组件 API

特性Vue 2Vue 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更容易处理异步加载和占位显示

组件定义方式

  1. 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('组件挂载完成');
}
}
  1. 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 APIVue 3 Composition API
组件定义对象选项（data/methods/computed/watch）setup() + ref/reactive/computed
逻辑组织方式按功能分类按功能组合，逻辑聚合在一起
逻辑复用mixins（可能冲突）Composable 函数，易复用
响应式管理自动 this 绑定ref/reactive 显式管理
学习曲线简单直观稍复杂，但更灵活

三，模板和指令

特性Vue 2Vue 3说明
v-model只支持单个 prop 和事件支持多 v-model，可自定义 prop/event绑定更灵活
Fragment不支持多根节点支持多根节点（Fragment）可以直接返回多个根节点，不用包一层 div
Teleport无新增 Teleport 组件支持把 DOM 元素传送到页面任意位置
Suspense无新增 Suspense 组件用于异步组件加载占位显示

四，响应式和状态管理

特性Vue 2Vue 3说明
响应式实现Object.definePropertyProxy更完整、性能更高，支持动态添加/删除属性
性能中等更高，虚拟 DOM 重写 + 编译优化组件初始化和更新速度更快
watch/computedOptions APIOptions API + Composition APIComposition API 中可以直接用 watch 或 computed 钩子

五，性能优化

特性Vue 2Vue 3说明
虚拟 DOM基础优化Patch 算法重写，更高效更新大列表性能提升明显
Tree-shaking部分支持完全支持打包更小
静态提升无模板静态提升静态节点不重复渲染，性能更好
编译器优化基本静态标记 + 动态节点优化减少不必要的 diff 计算