Vue 最大的革新之一就是响应式程序的重构。从 Vue 的 Object.defineProperty 升级到基于 Proxy 的实现，带来了性能提高和功能提高。

一、Vue 的局限性

在 Vue 中，响应式程序使用 Object.defineProperty 实现：

// Vue 的响应式实现
function defineReactive {
const dep = new Dep;Object.defineProperty(obj,key。{
get {
// 收集依赖
if {
dep.addSub;}
return val;},set {
if {
val = newVal;// 通知更新
dep.notify;}
}
})，}

主要问题：

1. 无法检测对象属性的添加和删除
2. 无法检测数组索引的变化
3. 需要 递归 遍历所有属性。性能开销大
4. 不支持 Map Set 等数据结构

二、Vue 的 Proxy 方案

Vue 使用 Proxy 重构了响应式程序：

// Vue 的响应式实现
function reactive {
return new Proxy(obj,{
get {
const res = Reflect.get;// 依赖收集
track;// 如果是对象，递归处理
return isObject?不过，reactive : res;其实，},set {
const oldValue = target;const res = Reflect.set;//触发更新
if {
trigger;怎么说呢，}
return res;},deleteProperty{
const res = Reflect.deleteProperty;if {
trigger;}
return res;}
})，}

优势：

• ✅ 可以拦截属性的添加和删除
• ✅ 支持数组索引变化
• ✅ 支持 MapSetWeakMapWeakSet
• ✅ 懒代理，提高性能

三、主要概念解析

. 依赖收集

// 全局的 activeEffectlet activeEffect = null;const targetMap = new WeakMap;function track {
if return;let depsMap = targetMap.get;if {
depsMap = new Map;targetMap.set;}
let dep = depsMap.get;if {
dep = new Set;depsMap.set，}
dep.add;}

. 触发更新

function trigger {
const depsMap = targetMap.get;if return，const dep = depsMap.get;if {
dep.forEach));}
}

. Effect 副作用函数

function effect {
const effectFn = => {
activeEffect = effectFn;const result = fn;activeEffect = null;return result;}，// 立即执行一次收集依赖
effectFn;return effectFn;}

四、ref 与 reactive 的区别

ref - 处理基本类型

import { ref,effect } from 'vue';
const count = ref;//访问需要 .valueeffect => { console.log;//自动追踪})，//修改count .value++;

实现原理：

function ref {
return {
说到_isRef。true,get value {
track;怎么说呢，return value;},set value {
if {
value = newVal;trigger，}
}
};}

reactive - 处理对象

import { reactive,effect } from 'vue';const state = reactive({
至于user。{
从name来看，'张三',age:
},items: });effect => { console .log;console .log;})，//修改任意属性都会触发更新state .user .age
=;怎么说呢，state .items .push;

五、实际使用场景

场景 ：表单双向绑定

import{ ref,effect } from 'vue';const form= ref ({
username: '',password: '' });//自动追踪表单变化effect => {//console .log;//这里可以自动提交或验证});//修改表单form .value .username ='admin';话说回来，

场景 ：计算属性

import{ ref。computed } from 'vue';const firstName= ref;const lastName= ref;const fullName= computed => {//return firstName .value + lastName .value;})，//当 firstName 或 lastName 变化时fullName 自动更新firstName .value ='李';console .log;不过，// '李三'

场景 ：列表渲染调整

import{ reactive。effect } from 'vue';const list= reactive();effect => {//只追踪实际使用的数据list .forEach;})，});//添加新项只会触发一次更新list .push;

六、性能调整技巧

. 使用 shallowRef和shallowReactive`

对于大型对象。不需要深度响应式：

import{ shallowRef,shallowReactive } from 'vue';//只追踪顶层属性const largeData= shallowRef({

config的观点是。{/* 大量配置 */ },