Vue学习笔记4.20

响应式数据判断

isRef: 检查一个值是否为ref对象
isReactive: 检查一个对象是否是由reactive创建的响应式代理
isReadonly:检查一个对象是否是由readonly创建的只读代理
isProxy: 检查一个对象是否是由reactive或者readonly方法创建的代理

shallowReactive(浅的劫持，浅的监视，浅的响应数据)与reactive（深的）

const reactiveHandler:any = {
  //获取属性值
  get(target:any, prop:any){
    const result = Reflect.get(target, prop)
    return result;
  },
  //设置值
  set(target:any, prop:any, value:any){
    const result = Reflect.set(target, prop, value)
    return result;
  },
  //删除值
  deleteProperty(target:any, prop:any){
    const result = Reflect.deleteProperty(target, prop)
  }
}

//定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target:any){
  //判断当前的目标对象是不是object类型(对象/数组)
  if(target && typeof target === 'object'){
    //对数组或者对象里面的所有数据进行递归处理
    //先判断当前的数据是不是数组
    if(Array.isArray(target)){
      target.forEach(item => reactive(item))
    }else{
      //再判断当前的数据是不是对象
      //对象的数据也要进行遍历操作
      Object.keys(target).forEach(key => target[key] = reactive(target[key]))
    }
    
    return new Proxy(target, reactiveHandler)
  }
  //如果传入的数据是基本类型数据，那么就直接返回
  return target;
}

定义一个函数isRef, 判断当前对象是不是ref对象
定义一个函数isReactive, 判断当前对象是不是reactive对象
定义一个函数isReadonly, 判断当前对象是不是readonly对象
定义一个函数isProxy, 判断当前对象是reactive对象或者readonly对象

const reactiveHandler:any = {
  //获取属性值
  get(target:any, prop:any){
    if(prop == "_is_reactive") return true
    const result = Reflect.get(target, prop)
    return result;
  },
  //设置值
  set(target:any, prop:any, value:any){
    const result = Reflect.set(target, prop, value)
    return result;
  },
  //删除值
  deleteProperty(target:any, prop:any){
    const result = Reflect.deleteProperty(target, prop)
  }
}

//定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target:any){
  //判断当前的目标对象是不是object类型(对象/数组)
  if(target && typeof target === 'object'){
    //对数组或者对象里面的所有数据进行递归处理
    //先判断当前的数据是不是数组
    if(Array.isArray(target)){
      target.forEach(item => reactive(item))
    }else{
      //再判断当前的数据是不是对象
      //对象的数据也要进行遍历操作
      Object.keys(target).forEach(key => target[key] = reactive(target[key]))
    }
    
    return new Proxy(target, reactiveHandler)
  }
  //如果传入的数据是基本类型数据，那么就直接返回
  return target;
}

function isRef(obj:any){
  return obj && obj._is_ref
}

function isReactive(obj:any){
  return obj && obj._is_reactive
}

function isReadonly(obj:any){
  return obj && obj._is_readonly
}

function isProxy(obj:any){
  return isReactive(obj) || isReadonly(obj)
}