一起学Vue3源码，实现最简Vue3 - 实现 reactive 和 readonly 嵌套对象转换功能

一、背景与问题

在Vue3中，响应式系统是其核心特性之一。reactive和readonly是两个关键函数，分别用于创建响应式对象和只读对象。在实际开发中，我们常常需要处理嵌套对象，比如：

const data = {
  user: {
    name: 'Alice',
    profile: {
      age: 25
    }
  }
};

如果直接使用reactive(data)，所有层级的属性都会被转换为响应式对象；而使用readonly(data)则会创建一个完全不可变的对象。但实际开发中，我们可能遇到以下问题：

嵌套对象的响应式转换不完全
非对象类型（如数组、字符串）的处理不统一
在修改只读对象时需要明确的异常提示
性能开销控制问题

这些场景都需要我们深入理解Vue3的响应式系统实现原理。

二、基本原理

Vue3的响应式系统基于ES6的Proxy对象，通过重写get和set方法来实现响应式。对于嵌套对象的处理，需要递归地对每个属性进行代理。同时，readonly需要完全阻止任何修改操作。

关键原理包括：

使用Reflect API进行属性访问和修改
递归处理嵌套对象
使用WeakMap缓存代理对象
异常处理机制

三、环境准备

# 假设使用Node.js环境
node -v
# 应该 >= 14.17.0

开发工具建议：

VS Code
Chrome DevTools
Postman（用于测试API）

四、核心实现

1. 基础响应式实现

function reactive(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  if (obj.__proxy__) {
    return obj.__proxy__;
  }
  
  const proxy = new Proxy(obj, {
    get(target, key) {
      const value = Reflect.get(target, key);
      if (typeof value === 'object' && value !== null) {
        return reactive(value); // 递归处理嵌套对象
      }
      return value;
    },
    set(target, key, value) {
      const oldValue = Reflect.get(target, key);
      const result = Reflect.set(target, key, value);
      
      // 检测值是否变化
      if (oldValue !== value) {
        console.log(`Property "${key}" changed from ${oldValue} to ${value}`);
      }
      
      return result;
    }
  });
  
  Object.defineProperty(obj, '__proxy__', {
    value: proxy,
    writable: true,
    enumerable: false,
    configurable: true
  });
  
  return proxy;
}

2. 只读对象实现

function readonly(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  if (obj.__proxy__) {
    return obj.__proxy__;
  }
  
  const proxy = new Proxy(obj, {
    get(target, key) {
      const value = Reflect.get(target, key);
      if (typeof value === 'object' && value !== null) {
        return readonly(value); // 递归处理嵌套对象
      }
      return value;
    },
    set(target, key, value) {
      throw new TypeError(`Cannot assign to read-only property "${key}"`);
    },
    deleteProperty(target, key) {
      throw new TypeError(`Cannot delete property "${key}"`);
    }
  });
  
  Object.defineProperty(obj, '__proxy__', {
    value: proxy,
    writable: true,
    enumerable: false,
    configurable: true
  });
  
  return proxy;
}

3. 复合处理函数

function createReactive(obj, isReadonly = false) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  const proxy = new Proxy(obj, {
    get(target, key) {
      const value = Reflect.get(target, key);
      if (typeof value === 'object' && value !== null) {
        return createReactive(value, isReadonly);
      }
      return value;
    },
    set(target, key, value) {
      const oldValue = Reflect.get(target, key);
      const result = Reflect.set(target, key, value);
      
      if (oldValue !== value) {
        console.log(`Property "${key}" changed from ${oldValue} to ${value}`);
      }
      
      return result;
    }
  });
  
  Object.defineProperty(obj, '__proxy__', {
    value: proxy,
    writable: true,
    enumerable: false,
    configurable: true
  });
  
  return proxy;
}

五、完整案例

1. Todo应用示例

<!DOCTYPE html>
<html>
<head>
  <title>Todo App</title>
</head>
<body>
  <div id="app">
    <input type="text" id="new-todo" placeholder="New todo">
    <button onclick="addTodo()">Add</button>
    <ul id="todo-list"></ul>
  </div>

  <script>
    const data = {
      todos: [
        { id: 1, text: 'Learn Vue3', completed: false },
        { id: 2, text: 'Implement reactive', completed: false }
      ]
    };

    const reactiveData = createReactive(data);

    function addTodo() {
      const input = document.getElementById('new-todo');
      const text = input.value.trim();
      if (text) {
        const newTodo = {
          id: Date.now(),
          text,
          completed: false
        };
        reactiveData.todos.push(newTodo);
        input.value = '';
      }
    }

    function renderTodos() {
      const list = document.getElementById('todo-list');
      list.innerHTML = '';
      reactiveData.todos.forEach(todo => {
        const li = document.createElement('li');
        li.textContent = `${todo.text} - ${todo.completed ? 'Completed' : 'Pending'}`;
        list.appendChild(li);
      });
    }

    // 初始渲染
    renderTodos();
  </script>
</body>
</html>

2. 嵌套对象测试

const data = {
  user: {
    name: 'Alice',
    profile: {
      age: 25,
      address: {
        city: 'Beijing',
        zip: '100000'
      }
    }
  }
};

const reactiveData = createReactive(data);

// 修改嵌套属性
reactiveData.user.profile.address.city = 'Shanghai';
// 应输出: Property "user.profile.address.city" changed from Beijing to Shanghai

六、源码解析

1. 递归处理机制

在createReactive函数中，get方法处理嵌套对象时，会递归调用createReactive。这确保了所有层级的属性都被代理：

get(target, key) {
  const value = Reflect.get(target, key);
  if (typeof value === 'object' && value !== null) {
    return createReactive(value, isReadonly);
  }
  return value;
}

2. 异常处理机制

在readonly模式下，set、deleteProperty等方法都会抛出异常：

set(target, key, value) {
  throw new TypeError(`Cannot assign to read-only property "${key}"`);
}

3. 缓存机制

使用__proxy__属性缓存代理对象，避免重复创建：

Object.defineProperty(obj, '__proxy__', {
  value: proxy,
  writable: true,
  enumerable: false,
  configurable: true
});

七、进阶使用

1. 响应式计算属性

function computed(fn) {
  const result = {};
  const proxy = new Proxy(result, {
    get(target, key) {
      if (key === 'value') {
        return fn();
      }
      return target[key];
    }
  });
  return proxy;
}

2. 响应式数组

function reactiveArray(arr) {
  return new Proxy(arr, {
    get(target, key) {
      if (key === 'length') {
        return target.length;
      }
      const value = Reflect.get(target, key);
      if (typeof value === 'object' && value !== null) {
        return reactiveArray(value);
      }
      return value;
    },
    set(target, key, value) {
      const oldValue = Reflect.get(target, key);
      const result = Reflect.set(target, key, value);
      
      if (oldValue !== value) {
        console.log(`Property "${key}" changed from ${oldValue} to ${value}`);
      }
      
      return result;
    }
  });
}

八、性能与工程实践

1. 性能优化

避免频繁创建Proxy对象
使用缓存机制（如__proxy__）
对大型对象进行分块处理

2. 异常处理

对非对象类型进行类型校验
添加详细的错误提示
使用try-catch包裹关键逻辑

3. 安全风险

避免暴露内部状态
对用户输入进行过滤
使用只读模式防止数据污染

九、常见问题与踩坑

1. 嵌套对象处理不完整

错误示例：

const data = {
  user: {
    name: 'Alice'
  }
};

const reactiveData = reactive(data);
reactiveData.user.name = 'Bob'; // 正常工作
reactiveData.user = { name: 'Charlie' }; // 会抛出异常

正确处理方式：需要确保对对象的重新赋值也能触发响应式更新。

2. 非对象类型处理

错误示例：

const str = 'Hello';
const reactiveStr = reactive(str); // 会返回原始字符串

解决方案：需要对字符串、数组等类型进行特殊处理。

3. 性能问题

使用Proxy可能带来性能开销，特别是处理大量数据时。可以通过以下方式优化：

使用缓存机制
避免不必要的代理创建
对大对象进行分块处理

十、最佳实践

使用createReactive代替单独的reactive和readonly
对复杂对象进行递归处理
对用户输入进行严格校验
使用只读模式保护核心数据
对关键操作添加异常处理
对大型对象进行分块处理

十一、总结

通过实现最简版的Vue3响应式系统，我们深入理解了reactive和readonly的实现原理。在实际开发中，这种模式适用于需要严格控制数据变更的场景，如：

需要防止意外修改的配置数据
需要保护核心业务逻辑的只读数据
需要递归处理嵌套结构的复杂数据

但需要注意避免在以下场景使用：

需要频繁修改的数据
对性能要求极高的场景
需要处理大量数据的场景

在实际开发中，建议结合Vue3的官方API使用，同时理解其底层原理，以便在需要时进行定制化开发。通过合理使用响应式系统，可以显著提升开发效率和代码可维护性。

一起学Vue3源码，实现最简Vue3 - 实现 reactive 和 readonly 嵌套对象转换功能

一起学Vue3源码，实现最简Vue3 - 实现 reactive 和 readonly 嵌套对象转换功能

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础响应式实现

2. 只读对象实现

3. 复合处理函数

五、完整案例

1. Todo应用示例

2. 嵌套对象测试

六、源码解析

1. 递归处理机制

2. 异常处理机制

3. 缓存机制

七、进阶使用

1. 响应式计算属性

2. 响应式数组

八、性能与工程实践

1. 性能优化

2. 异常处理

3. 安全风险

九、常见问题与踩坑

1. 嵌套对象处理不完整

2. 非对象类型处理

3. 性能问题

十、最佳实践

十一、总结

评论已关闭

推荐阅读