ref和reactive都是vue3实现响应式的方法，具体可参考源码packages\reactivity\src\ref.ts和packages\reactivity\src\reactive.ts。 提起vue3的响应式大家首先想到的是Proxy，这里就有个误区，Proxy只能代理对象不能处理基础数据类型，所以才有了ref和reactive之分

ref

ref实现相对简单，直接封装对象重写get和set方法，同样也是在get和set收集依赖和触发依赖 对象也可以使用ref，当传入对象是会默认将其转换成reactive的响应式，如果不需要转换可以参考shallowRef

 function ref(rawValue) {
    let _value = !isObject(rawValue) ? rawValue : reactive(rawValue) // 是否为对象

    return {
      get value() {
        track(this, 'value') // 收集依赖
        return _value
      },
      set value(newVal) {
        _value = !isObject(newVal) ? newVal : reactive(rawValue)
        trigger(this, 'value') // 触发
      }
    }
  }

reactive

reactive实现就是Proxy那一套了

function(target) {
  return new Proxy(target, {
    get: function(t, k) {
      track(t, k);      
      return Reflect.get(t, key);
    },
    set: function(t, k, v) {
      Reflect.set(t, k, v);
      trigger(t, k)
    }
  })
}