isRef, isReactive 与 isReadonly的原理

vue3中的isRef、 isReadonly与isReactive是怎么实现的呢？学习自尚硅谷

isRef#

在获取数据的时候，返回的Ref object中加入一个_is_ref属性，就可以在获取的时候判断该属性，从而判断是否是ref对象

/*
自定义shallowRef
*/
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
}

isReactive#

在proxy对象里面的reactiveHandler 中，当我get这个object的属性的时候，在对应的get方法内判断这个属性名字是不是_is_reactive,具体代码参见我的另一篇文章https://www.cnblogs.com/lyzz1314/p/14812191.html

isReadonly#

和isReactive相同的道理，参见isReadonly实现代码：https://www.cnblogs.com/lyzz1314/p/14810733.html

/* 
判断是否是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)
}
 
 
/* 测试判断函数 */
console.log(isReactive(reactive({})))
console.log(isRef(ref({})))
console.log(isReadonly(readonly({})))
console.log(isProxy(reactive({})))
console.log(isProxy(readonly({})))