vue2中的proxy代理

最新推荐文章于 2024-10-08 21:32:59 发布

Bwcx_lzp

最新推荐文章于 2024-10-08 21:32:59 发布

阅读量2.1k

点赞数

分类专栏：源码笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_49159526/article/details/120140102

版权

源码笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文解析了Vue 2中的proxy函数如何实现在实例间共享props和data属性。通过proxy，我们理解了它是如何创建动态getter和setter，从而实现Vue组件状态的透明映射。通过实例代码和测试，展示了proxy在实际开发中的应用和效果。

摘要由CSDN通过智能技术生成

代理的作用是把 props 和 data 上的属性代理到 vm 实例上，这也就是为什么比如我们定义了data和 props，却可以通过 vm 实例访问到它（即在vue中我们直接通过this. 拿到对应的属性）

vue2中通过一个代理函数proxy,代码如下

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop,
}
export function proxy(target, sourceKey, key) {
  sharedPropertyDefinition.get = function proxyGetter() {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter(val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

简化一下

 function proxy(target, prop, key) {
      Object.defineProperty(target, key, {
        enumerable: true,
        configurable: true,
        get() {
          return target[prop][key];
        },
        set(newVal) {
          target[prop][key] = newVal;
        }
      });
    }

测试

   let vm = {
      _props: {
        id: 1,
        name: '测试',
        sex: '男',
        todo: 'play'
      }
    }
    console.log(vm._props.name, vm.name)
    proxy(vm, '_props', 'name')
    console.log(vm.name)
    console.log(vm.id)