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
    
  • 相关阅读:
    Roce ofed 环境搭建与测试
    Ubuntu 1804 搭建NFS服务器
    Redhat 8.0.0 安装与网络配置
    Centos 8.1 安装与网络配置
    SUSE 15.1 系统安装
    VSpare ESXi 7.0 基本使用(模板、iso、SRIOV)
    VSpare ESXi 7.0 服务器安装
    open SUSE leap 15.1 安装图解
    KVM虚拟机网卡连接网桥
    GitHub Action一键部署配置,值得拥有
  • 原文地址:https://www.cnblogs.com/lyzz1314/p/14810733.html
Copyright © 2011-2022 走看看