zoukankan      html  css  js  c++  java
  • shallowReadonly 与 readonly原理浅析

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

    目的

    使一个正常的object对象转化为响应式对象

    解决方案

    简单的说,就是w3c在object的增删改查时增加了hook函数,可以让用户对原生js获取事件、赋值事件等进行捕捉。这个hook函数就是ProxyReflect.
    我接下来做的一件事就是使用这个hook函数,来使一个正常的object对象转化为响应式对象。

    严格来讲,这个最后结果还不是响应式对象,只是这个object再增删改查属性的时候会触发自定义逻辑,具体编写什么样的逻辑能能够做到vue3中的响应式,本文没有阐述。

    可以首先定义一个事件处理函数,对原生js获取事件、赋值事件等进行捕捉,随后再传递给Reflect

    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])
          })
        }
        const proxy = new Proxy(target, readonlyHandler)
    
        return proxy 
      }
    
      return target
    }
    
    /* 测试自定义readonly */
    /* 测试自定义shallowReadonly */
    const objReadOnly = readonly({
      a: {
        b: 1
      }
    })
    const objReadOnly2 = shallowReadonly({
      a: {
        b: 1
      }
    })
    
    objReadOnly.a = 1
    objReadOnly.a.b = 2
    objReadOnly2.a = 1
    objReadOnly2.a.b = 2
    
  • 相关阅读:
    20150826运算符,if语句
    20150825数据类型以及数据转换
    !!!SQL sever 函数表达
    SQL
    !!!遍历数组之多维数组!
    数组应用之————二分法查找
    数组-冒泡排列
    Homework!---判断多久过生日
    C#——语句!
    C#——语言基础 之 运算符!
  • 原文地址:https://www.cnblogs.com/lyzz1314/p/14810733.html
Copyright © 2011-2022 走看看