第一步

index.ts

export * from './reactive';
export * from './effect';

// -----------------------------新增开始-----------------------------
export * from './ref';
// -----------------------------新增结束-----------------------------

ref.ts

import { toReactive } from './reactive';
import { activeEffect, trackEffect, triggerEffects } from './effect';
import { createDep } from './reactiveEffect';

export function ref(value) {
  return createRef(value);
}

function createRef(value) {
  return new RefImpl(value);
}

class RefImpl {
  // ref 标识
  public __v_isRef = true;
  // 保存 ref 值
  public _value;
  // 收集 effect
  public dep;

  constructor(public rawValue) {
    this._value = toReactive(rawValue);
  }

  get value() {
    trackRefValue(this);
    return this._value;
  }

  set value(newValue) {
    if (newValue !== this.rawValue) {
      this.rawValue = newValue;
      this._value = newValue;
      triggerRefValue(this);
    }
  }
}

function trackRefValue(ref) {
  if (activeEffect) {
    trackEffect(activeEffect, ref.dep = ref.dep || createDep(() => ref.dep = undefined, 'undefined'));
  }
}

function triggerRefValue(ref) {
  const dep = ref.dep;
  if (dep) {
    triggerEffects(dep);
  }
}

reactive.ts

import { isObject } from '@vue/shared';

...
export function toReactive(value) {
  return isObject(value) ? reactive(value) : value;
}