当前位置：首页 > news >正文

Vue 数据代理机制实现

news 来源：原创 2025/6/13 12:31:21

Vue 数据代理机制实现

以下是符合 Vue 核心原理的简化版数据代理实现：

class Vue {constructor(options) {// 1. 创建内部数据存储对象this._data = options.data || {};// 2. 执行数据代理this._proxyData();}// 数据代理核心方法_proxyData() {Object.keys(this._data).forEach(key => {// 3. 跳过 Vue 保留属性 (以 _ 或 $ 开头)if (key.startsWith('_') || key.startsWith('$')) {console.warn(`[Vue warn]: Property "${key}" must be accessed via $data because it starts with a reserved character.`);return;}// 4. 使用 defineProperty 建立代理Object.defineProperty(this, key, {enumerable: true,configurable: true,get: () => {console.log(`[get] ${key}: ${this._data[key]}`);return this._data[key];},set: (newVal) => {console.log(`[set] ${key}: ${newVal}`);this._data[key] = newVal;// 实际 Vue 这里会触发响应式更新// this._updateView(); }});});}
}// 使用示例
const vm = new Vue({data: {message: "Hello Vue",count: 0,// 以下属性不会被代理_internal: "secret",$private: "data"}
});// 正常代理属性
console.log(vm.message); // "Hello Vue"
vm.count = 5;            // 设置新值// 保留属性无法通过代理访问
console.log(vm._internal); // undefined (控制台会有警告)
console.log(vm.$private);  // undefined

关键实现说明：

内部数据存储
使用 _data 属性存储原始数据（Vue 实际实现方式）
保留属性过滤
跳过以 _ 或 $ 开头的属性（Vue 内部保留标识符）
代理机制核心
- 使用 Object.defineProperty 创建响应式代理
- getter 返回 _data 中的对应值
- setter 更新 _data 中的值
响应式扩展点
在 setter 中预留了视图更新接口（实际 Vue 会在这里触发依赖更新）

实际 Vue 实现的优化点：

嵌套对象处理
Vue 会递归遍历嵌套对象进行代理
数组方法重写
拦截数组的变异方法（push/pop/shift 等）
依赖收集系统
在 getter 中收集依赖（Watcher）
异步更新队列
使用 nextTick 批量更新视图
代理冲突检测
检查是否与 Vue 实例方法重名（如 $emit）

完整版增强实现（包含嵌套代理）：

class Vue {constructor(options) {this._data = options.data || {};this._proxyData(this, this._data);}_proxyData(target, data) {Object.keys(data).forEach(key => {// 跳过保留属性if (key.startsWith('_') || key.startsWith('$')) return;// 递归处理嵌套对象if (typeof data[key] === 'object' && data[key] !== null) {this._proxyData(data[key], data[key]);}Object.defineProperty(target, key, {get: () => data[key],set: (newVal) => {// 处理新值为对象的情况if (typeof newVal === 'object') {this._proxyData(newVal, newVal);}data[key] = newVal;}});});}
}