Vue3.js“非原始值”响应式实现基本原理笔记

// 假设有一个简单的Vue3响应式系统的核心函数
 
// 创建一个响应式对象
function reactive(raw) {
  return new Proxy(raw, {
    get(target, property, receiver) {
      track(target, property);
      const value = Reflect.get(target, property, receiver);
      return isObject(value) ? reactive(value) : value;
    },
    set(target, property, value, receiver) {
      const oldValue = target[property];
      const result = Reflect.set(target, property, value, receiver);
      if(isObject(value)) {
        reactive(value); // 如果设置的值是个对象，则继续做为响应式对象处理
      }
      if(oldValue !== value) {
        trigger(target, property);
      }
      return result;
    }
  });
}
 
// 跟踪函数，用于记录依赖
function track(target, property) {
  // 跟踪逻辑实现
}
 
// 触发函数，用于触发依赖更新
function trigger(target, property) {
  // 触发逻辑实现
}
 
// 检查是否是个普通对象
function isObject(value) {
  return value !== null && typeof value === 'object';
}
 
// 示例使用
const obj = {
  count: 0,
  nested: {
    value: 'Nested'
  }
};
const reactiveObj = reactive(obj);
 
// 访问属性会触发跟踪函数
console.log(reactiveObj.count); // 跟踪count属性
console.log(reactiveObj.nested.value); // 跟踪nested和value属性
 
// 设置属性会触发触发函数和可能的循环引用检测
reactiveObj.count = 1; // 触发count属性的变化
reactiveObj.nested.value = 'New Nested'; // 触发nested和value属性的变化

这个代码示例提供了一个简化版本的响应式系统核心函数实现。它展示了如何使用Proxy对象来代理一个普通对象，从而在属性访问和设置时进行跟踪和触发依赖更新。这是Vue3响应式系统核心逻辑的一个简化版本，旨在帮助开发者理解其基本原理。