zoukankan      html  css  js  c++  java
  • isRef, isReactive 与 isReadonly的原理

    vue3中的isRefisReadonlyisReactive是怎么实现的呢?学习自尚硅谷

    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({})))
    
  • 相关阅读:
    vue中 根据音频 获取音频的时长
    获取dom位置信息
    react笔记
    Git 基础命令
    vue 笔记
    倒计时
    删留言
    python 类之类变量与实例变量
    python 类的定义
    python 列表推导式
  • 原文地址:https://www.cnblogs.com/lyzz1314/p/14812244.html
Copyright © 2011-2022 走看看