likes
comments
collection
share

使用Proxy封装reactive函数

作者站长头像
站长
· 阅读数 16

周五的时候同事问我Proxy在vue3的使用以及原理，我单独给他用Proxy手写了一个reactive函数，通过这个reactive函数实现数据的劫持和监听。

我觉得有可能大家也有相同的困惑，并且可能会对大家认识这个技术点有帮助，我就简单的解释一下，并且把手写给他的代码贴出来给大家看看。

要了解Proxy如何封装reactive实现数据的监听和劫持，首先还要了解一下Proxy的基础知识点。

Proxy的基础知识

我们都知道在vue2中是使用Object.defineProperty实现数据的劫持和监听；而在vue3中使用了Proxy来实现数据的劫持和监听。

在百度上对Proxy的解释是：用于创建一个对象的代理，从而实现基本操作的拦截和自定义。

那基本跟我们预想的结果和作用是一致的。

我们看一下Proxy的基本使用。

基本语法如下：

const p = new Proxy(target, handler)

这里的target是要使用 Proxy 包装的目标对象，而handler是一个对象的，但是在这个对象中可以定义get、set和deleteProperty之类的方法，用于监听对数据的获取、设置和删除的行为。

在监听这些行为中，处理一些业务逻辑。

下面我将对reactive函数封装的方法示例在下面展示出来。

reactive函数的封装

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>reactive函数的实现</title>
    </head>
    <body>
    <script>

    const reactive = (obj) => new Proxy(obj, {
      get(target, key){
        console.log('执行了get方法');
        return Reflect.get(target, key)
      },
      set(target, key, newValue){
        console.log('执行了set方法');
        return Reflect.set(target, key, newValue)
      },
      deleteProperty(target, key) {
        console.log('执行了deleteProperty方法');
        return Reflect.deleteProperty(target, key)
      }
    })
    const obj = { name: '小明111', age: 20 };
    const rObj = reactive(obj);
    console.log(rObj.name);
    rObj.name = '小明222';
    console.log(rObj.name);
    </script>
    </body>
    </html>

多余的基础知识不做过多的介绍，一般Proxy是跟Reflect一起配合使用的，对这块知识点不是特别了解的同学可以跳转这里了解一下基础知识再回来看这一块演示的代码。

上面的这部分代码也很好理解。

就是封装的reactive函数实现的目标是对obj做了一层封装，返回了新对象rObj，并且在对这个新对象rObj实现「获取值」、『设置值』和『删除值』的时候，都会触发这里的执行函数，打印出对应的结果。

我们看到这里对这段代码做了『获取值』和『设置值』的操作，我们看一下最终的执行结果。

执行结果

使用Proxy封装reactive函数

如上所示，分别执行了get的拦截和set的拦截，是我们期望的结果。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。