JS中defineProperty/Proxy 数据劫持 vue3/vue2双向绑定实现原理，react 实现原理

defineProperty 基本语法

Object.defineProperty(obj, propName, descriptor)

• obj: 要定义属性的目标对象。
• ropName: 要定义或修改的属性名。
• descriptor: 属性描述对象，定义这个属性的行为。

常用用法示例

• 定义只读属性（不可修改）

const user = {};

Object.defineProperty(user, 'id', {
  value: 123,
  writable: false,      // 不可写
  enumerable: true,     // 可遍历
  configurable: false   // 不可删除
});

console.log(user.id); // 123

user.id = 999;
console.log(user.id); // 仍然是 123，不会改变

示例 2：使用 get/set 创建计算属性（或双向绑定）

const person = {
  firstName: '张',
  lastName: '三'
};

Object.defineProperty(person, 'fullName', {
  get() {
    return this.firstName + this.lastName;
  },
  set(newVal) {
    const [first, last] = newVal.split(' ');
    this.firstName = first;
    this.lastName = last;
  },
  enumerable: true
});

console.log(person.fullName); // 张三

person.fullName = '李 四';
console.log(person.firstName); // 李
console.log(person.lastName);  // 四

示例 3：隐藏属性（不能被枚举）

const config = {};

Object.defineProperty(config, 'secret', {
  value: '123456',
  enumerable: false // 不可枚举
});

console.log(config.secret); // 123456
console.log(Object.keys(config)); // []

示例 4：防止属性被删除或重新配置

const settings = {};

Object.defineProperty(settings, 'theme', {
  value: 'dark',
  configurable: false
});

delete settings.theme;  // 删除失败
console.log(settings.theme); // 'dark'

. 数据劫持 —— Vue 2 响应式系统的核心

let val = 'hello';
const obj = {};
Object.defineProperty(obj, 'msg', {
  get() {
    console.log('被读取了');
    return val;
  },
  set(newVal) {
    console.log('被修改了');
    val = newVal;
  }
});

obj.msg;      // 被读取了
obj.msg = 123; // 被修改了

构建只读属性或安全接口（封装设计）

class Point {
  constructor(x, y) {
    Object.defineProperty(this, 'x', {
      value: x,
      writable: false
    });
    Object.defineProperty(this, 'y', {
      value: y,
      writable: false
    });
  }
}

const p = new Point(1, 2);
p.x = 100; // 修改失败
console.log(p.x); // 1

添加元信息（如 Vue3 中 __v_isReactive 等）

const obj = {};
Object.defineProperty(obj, '__v_isReactive', {
  value: true,
  enumerable: false
});

和 Object.defineProperties() 的区别

Object.defineProperties(obj, {
  prop1: { ... },
  prop2: { ... },
  ...
});

和普通赋值有啥不同？

Object.defineProperty 能干什么？

什么是 Proxy

Proxy 是 ES6 引入的一个内置对象，它用于创建一个对象的代理，从而拦截并自定义基本操作（如属性读取、赋值、函数调用等）。

const proxy = new Proxy(target, handler);

• arget：要代理的目标对象
• handler：包含拦截行为的对象（称为“捕捉器”）

Proxy 基础用法

拦截属性读取 (get)

const obj = { name: '张三' };

const proxy = new Proxy(obj, {
  get(target, key) {
    console.log(`读取属性：${key}`);
    return target[key];
  }
});

console.log(proxy.name); // 输出：读取属性：name

拦截属性设置 (set)

const proxy = new Proxy({}, {
  set(target, key, value) {
    console.log(`设置属性：${key} = ${value}`);
    target[key] = value;
    return true;
  }
});

proxy.age = 25; // 输出：设置属性：age = 25

拦截 in 操作符 (has)

const proxy = new Proxy({ name: 'Vue' }, {
  has(target, key) {
    return key === 'name';
  }
});

console.log('name' in proxy); // true
console.log('age' in proxy);  // false

拦截删除操作 (deleteProperty)

const obj = { foo: 'bar' };

const proxy = new Proxy(obj, {
  deleteProperty(target, key) {
    console.log(`删除属性：${key}`);
    return delete target[key];
  }
});

delete proxy.foo; // 输出：删除属性：foo

使用场景

数据响应式（Vue 3）

• 最重要的应用就是 Vue 3 的响应式系统。
• 通过拦截对象的 get 和 set，实现自动追踪依赖和更新视图。

数据访问控制（如私有属性保护）

const user = { _secret: '123', name: 'Admin' };

const secureUser = new Proxy(user, {
  get(target, key) {
    if (key.startsWith('_')) {
      throw new Error('禁止访问私有属性');
    }
    return target[key];
  }
});

监控日志、调试数据访问

const state = new Proxy({}, {
  get(target, key) {
    console.log(`读取：${key}`);
    return target[key];
  },
  set(target, key, val) {
    console.log(`修改：${key} = ${val}`);
    target[key] = val;
    return true;
  }
});

虚拟属性（动态计算返回值）

const data = {
  name: 'Vue'
};

const proxy = new Proxy(data, {
  get(target, key) {
    if (key === 'upperName') {
      return target.name.toUpperCase();
    }
    return target[key];
  }
});

console.log(proxy.upperName); // 输出：VUE

Vue 3 中 Proxy 的应用原理

 核心方法：reactive()
 import { reactive } from 'vue';

const state = reactive({
  count: 0
});

 

实现机制简述

function reactive(target) {
  return createReactiveObject(target);
}

内部会创建一个 Proxy(target, handler)：

const mutableHandlers = {
  get(target, key, receiver) {
    const result = Reflect.get(target, key, receiver);
    track(target, key); // 依赖收集
    return isObject(result) ? reactive(result) : result;
  },
  set(target, key, value, receiver) {
    const oldValue = target[key];
    const result = Reflect.set(target, key, value, receiver);
    if (oldValue !== value) {
      trigger(target, key); // 通知更新
    }
    return result;
  }
};

function createReactiveObject(target) {
  return new Proxy(target, mutableHandlers);
}

用 Proxy 实现 Vue 3 的响应式原理（简化版）

// 简易版 reactive.ts（Vue3 响应式核心原理）

// 全局依赖收集容器
let activeEffect: Function | null = null;
const targetMap = new WeakMap<object, Map<string | symbol, Set<Function>>>();

// 模拟 Vue3 的 effect
export function effect(fn: Function) {
  activeEffect = fn;
  fn(); // 立即执行一次，收集依赖
  activeEffect = null;
}

// 收集依赖
function track(target: object, key: string | symbol) {
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }

  dep.add(activeEffect); // 添加依赖函数
}

// 触发依赖
function trigger(target: object, key: string | symbol) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(fn => fn());
  }
}

// 创建响应式对象
export function reactive<T extends object>(target: T): T {
  return new Proxy(target, {
    get(obj, key, receiver) {
      const result = Reflect.get(obj, key, receiver);
      track(obj, key); // 收集依赖
      return typeof result === "object" && result !== null
        ? reactive(result) // 深度响应式
        : result;
    },
    set(obj, key, value, receiver) {
      const oldValue = obj[key as keyof T];
      const result = Reflect.set(obj, key, value, receiver);
      if (oldValue !== value) {
        trigger(obj, key); // 触发更新
      }
      return result;
    }
  });
}

使用方式（模拟 Vue3 Setup）

import { reactive, effect } from './reactive';

const state = reactive({
  count: 0,
  nested: {
    name: 'Vue'
  }
});

effect(() => {
  console.log('count changed:', state.count);
});

effect(() => {
  console.log('nested.name changed:', state.nested.name);
});

state.count++;            // 👉 自动触发第一个 effect
state.nested.name = 'V3'; // 👉 自动触发第二个 effect

结果

count changed: 0
nested.name changed: Vue
count changed: 1
nested.name changed: V3

React 为什么不需要 Proxy？

React 的设计理念和 Vue 完全不同：
Vue 是“响应式系统” 修改数据，自动通知 DOM 更新。
React 是“声明式渲染 + 手动状态更新”
组件每次通过 render() 或函数体重新执行，并依赖状态 useState/useReducer/useContext，触发重新渲染。

React 的状态追踪方式

React 不会“监听对象属性变化”，它靠的是手动调用状态更新函数：

const [count, setCount] = useState(0);

// 你必须显式调用：
setCount(count + 1);

• 它不劫持对象、也不会追踪谁改了数据；
• 它是“不可变数据 + 手动触发更新”的范式；
• 所以不需要 Proxy 或 defineProperty。

React 不追踪对象属性

const [info, setInfo] = useState({ name: '张三' });

info.name = '李四'; // ❌ React 不知道你改了，页面不会更新

• React 根本无法知道你直接改了 info.name，因为它没做数据劫持。

setInfo({ ...info, name: '李四' }); // ✅ 触发更新

React 响应更新靠的机制是

React 和 Vue 的根本区别