Vue 2 和 Vue 3 的区别

一，核心架构

特性	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天然响应式，自动更新。

TypeScript/JavaScript的区别？

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

2. 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

1. Proxy 的组成：

名称	说明
target	被代理的对象，即原始对象
handler	一个对象，定义拦截操作的函数（称为 trap）
trap	拦截操作的方法，例如 get、set、deleteProperty、has、ownKeys 等

Trap	功能
get	读取属性时触发
set	设置属性时触发
deleteProperty	删除属性时触发
has	检查对象中是否有某属性（in 操作符）触发
ownKeys	获取对象所有属性（Object.keys、for...in）触发

2. 实际应用示例（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	更容易处理异步加载和占位显示

组件定义方式

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('组件挂载完成');
  }
}

2. 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' })

// 🔹 Props
const props = defineProps<{
  msg: string
}>()

// 🔹 Emit
const 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')
}

// 🔹 Watch
watch(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 计算