Composition API(手写)

仅仅为了方便学习记录信息，未有其他用途。（采摘）

//shallowReactive 与 reactive
const reactiveHandler = {
  get (target, key) {
    if (key==='_is_reactive') return true;
    return Reflect.get(target, key)
  },
  set (target, key, value) {
    console.log('数据已更新, 去更新界面')
    return Reflect.set(target, key, value)
  },
  deleteProperty (target, key) {
    console.log('数据已删除, 去更新界面')
    return  Reflect.deleteProperty(target, key)
  },
}
/* 
自定义shallowReactive
*/
function shallowReactive(obj) {
  return new Proxy(obj, reactiveHandler)
}
/* 
自定义reactive
*/
function reactive (target) {
  if (target && typeof target==='object') {
    if (target instanceof Array) { // 数组
      target.forEach((item, index) => {
        target[index] = reactive(item)
      })
    } else { // 对象
      Object.keys(target).forEach(key => {
        target[key] = reactive(target[key])
      })
    }
    return new Proxy(target, reactiveHandler)
  }
  return target
}
/////////////////////////////////////////////////////
//shallowRef 和 ref
function shallowRef(target) {
  const result = {
    _value: target, // 用来保存数据的内部属性
    _is_ref: true, // 用来标识是ref对象
    get value () {
      return this._value
    },
    set value (val) {
      this._value = val
      console.log('set value 数据已更新, 去更新界面')
    }
  }
  return result
}
//自定义ref
function ref(target) {
  if (target && typeof target==='object') {
    target = reactive(target)
  }
  const result = {
    _value: target, // 用来保存数据的内部属性
    _is_ref: true, // 用来标识是ref对象
    get value () {
      return this._value
    },
    set value (val) {
      this._value = val
      console.log('set value 数据已更新, 去更新界面')
    }
  }
  return result
}
////////////////////////////////////////////////////////
//shallowReadonly 与 readonly
const readonlyHandler = {
  get (target, key) {
    if (key==='_is_readonly') return true
    return Reflect.get(target, key)
  },
  set () {
    console.warn('只读的, 不能修改')
    return true
  },
  deleteProperty () {
    console.warn('只读的, 不能删除')
    return true
  },
}
//自定义shallowReadonly
function shallowReadonly(obj) {
  return new Proxy(obj, readonlyHandler)
}
//自定义readonly
function readonly(target) {
  if (target && typeof target==='object') {
    if (target instanceof Array) { // 数组
      target.forEach((item, index) => {
        target[index] = readonly(item)
      })
    } else { // 对象
      Object.keys(target).forEach(key => {
        target[key] = readonly(target[key])
      })
    }
    return new Proxy(target, readonlyHandler) 
  }
  return target
}
////////////////////////////////////////////////////////
/*只要传入的对象是经过 [ 响应式方法 ] 处理,那么在把这个对象传入判断函数中,取这个 [ 响应式对象 ] 的属性值 ,
就会触发 [ 响应式对象 ] 方法里的get方法==>>导致在调用以下函数时,取 [ 响应式对象 ] 里面的 _is_** 属性,,内置get逻辑会直接返回true ,因为以下方法假如传的不是 [ 响应式对象 ] ,那么就不会走到 [ 自定义响应式数据 ] 的逻辑中的get方法里,那么自然就判断不成立!!!
*/
//判断是否是ref对象
function isRef(obj) {
  return obj && obj._is_ref
}
//判断是否是reactive对象
function isReactive(obj) {
  return obj && obj._is_reactive
}
//判断是否是readonly对象
function isReadonly(obj) {
  return obj && obj._is_readonly
}
//是否是reactive或readonly产生的代理对象
function isProxy (obj) {
  return isReactive(obj) || isReadonly(obj)
}

Composition API(其他)<===========================>vue3生命周期解读