vue3响应式reactive的实现原理；proxy深层代理；vue3响应式api

const obj1 = {};
Object.defineProperty(obj1, 'a', {
  get() {
    console.log('get1');
  },
  set() {
    console.log('set1');
  }
});
obj1.b = 2; // 监听不到

const o = {
    name: 'tom',
    info: {
        age: 18
    }
}
const po = new Proxy(o, {
    get(target, key, proxy) {
        console.log(`get key:${key}`);
        return Reflect.get(...arguments);
    },
    set(target, key, value, proxy){
        console.log(`set key:${key}, value: ${value}`);
        return Reflect.set(...arguments);
    }
})

// 工具方法：判断是否是一个对象（注：typeof 数组 也等于 'object'
const isObject = val => val !== null && typeof val === 'object';

// 工具方法：值是否改变，改变才触发更新
const hasChanged = (value, oldValue) =>
  value !== oldValue && (value === value || oldValue === oldValue);

// 工具方法：判断当前的 key 是否是已经存在的
const hasOwn = (val, key) => hasOwnProperty.call(val, key);

// 闭包：生成一个 get 方法
function createGetter() {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);
    console.log(`getting key：${key}`);
    // track(target, 'get' /* GET */, key);

    // 深层代理对象的关键！！！判断这个属性是否是一个对象，是的话继续代理动作，使对象内部的值可追踪
    if (isObject(res)) {
      return reactive(res);
    }
    return res;
  };
}

// 闭包：生成一个 set 方法
function createSetter() {
  return function set(target, key, value, receiver) {
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);

    // 判断当前 key 是否已经存在，不存在的话表示为新增的 key ，后续 Vue “标记”新的值使它其成为响应式
    if (!hadKey) {
      console.log(`add key：${key}，value：${value}`);
      // trigger(target, 'add' /* ADD */, key, value);
    } else if (hasChanged(value, oldValue)) {
      console.log(`set key：${key}，value：${value}`);
      // trigger(target, 'set' /* SET */, key, value, oldValue);
    }
    return result;
  };
}

const get = createGetter();
const set = createSetter();
// 基础的处理器对象
const mutableHandlers = {
  get,
  set
  // deleteProperty
};
// 暴露出去的方法，reactive
function reactive(target) {
  return createReactiveObject(target, mutableHandlers);
}
// 创建一个响应式对象
function createReactiveObject(target, baseHandlers) {
  const proxy = new Proxy(target, baseHandlers);
  return proxy;
}

const proxyObj = reactive({
  id: 1,
  name: 'front-refined',
  childObj: {
    hobby: 'coding'
  }
});

proxyObj.childObj.hobby
// get key：childObj
// get key：hobby
proxyObj.childObj.hobby="play"
// get key：childObj
// set key：hobby，value：play

// 工具方法：值是否改变，改变才触发更新
const hasChanged = (value, oldValue) =>
  value !== oldValue && (value === value || oldValue === oldValue);

// 工具方法：判断是否是一个对象（注：typeof 数组 也等于 'object'
const isObject = val => val !== null && typeof val === 'object';

// 工具方法：判断传入的值是否是一个对象，是的话就用 reactive 来代理
const convert = val => (isObject(val) ? reactive(val) : val);

function toRaw(observed) {
  return (observed && toRaw(observed['__v_raw' /* RAW */])) || observed;
}

// ref 实现类
class RefImpl {
  constructor(_rawValue, _shallow = false) {
    this._rawValue = _rawValue;
    this._shallow = _shallow;
    this.__v_isRef = true;
    this._value = _shallow ? _rawValue : convert(_rawValue);
  }
  get value() {
    // track(toRaw(this), 'get' /* GET */, 'value');
    return this._value;
  }
  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal;
      this._value = this._shallow ? newVal : convert(newVal);
      // trigger(toRaw(this), 'set' /* SET */, 'value', newVal);
    }
  }
}
// 创建一个 ref
function createRef(rawValue, shallow = false) {
  return new RefImpl(rawValue, shallow);
}
// 暴露出去的方法，ref
function ref(value) {
  return createRef(value);
}
// 暴露出去的方法，shallowRef
function shallowRef(value) {
  return createRef(value, true);
}

<template>
  <div>name：{{name}}</div>
  <input v-model="name" />
</template>

// ...
setup() {
  let value = 'front-refined';
  // 参数是一个工厂函数
  const name = customRef((track, trigger) => {
    return {
      get() {
        // 收集依赖它的 effect
        track();
        return value;
      },
      set(newValue) {
        value = newValue;
        // 触发更新依赖它的所有 effect
        trigger();
      }
    };
  });
  return {
    name
  };
}

const object = reactive({
  name: 'tom',
  info: {
    age: 19
  }
})
const name = toRef(object, 'name');
name.value = 1; // object.name也会变成1

watch(
  [() => state.id, () => state.name],
  ([id, name], [oldId, oldName]) => {
    /* ... */
  }
);

watchEffect(
  (onInvalidate) => {
    console.log(a.value, 'a===');
    onInvalidate(()=>{
      console.log('清除');
    })
  },
  {
  onTrigger(e) {
    console.log(e, 'onTrigger==');
  },
  onTrack(e)
  {
    console.log(e, 'onTrack===');
  }
})
setTimeout(() => {
  a.value += 1;
}, 1000)