设计模式：代理模式

最新推荐文章于 2024-04-30 21:28:27 发布

Attacking-Coder

最新推荐文章于 2024-04-30 21:28:27 发布

阅读量52

点赞数

分类专栏：设计模型文章标签：代理模式设计模式

本文链接：https://blog.csdn.net/xinbaiyu/article/details/128633571

版权

设计模型专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代理模式（Proxy），为一个对象提供一种对于该对象访问以及修改的一种控制手段。
像是VUE2中就用Object.defineProperty()对data中的各个属性进行监听，只有属性发生了改变就会触发set函数然后触发页面的局部更新。
VUE3同理只不过用的API是Proxy（ES6）
例子：

<!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>Document</title>
</head>

<body>
  <div id="box"></div>

  <script>
    let obj = {
      data: '默认'
    }

    let proxy = new Proxy(obj, {
      get (target, key) {
        console.log('我被访问了')
        return target[key]
      },
      set (target, key, val) {
        console.log('我要被修改了')
        if (key == 'data') {
          box.innerHTML = val
        } else {
          throw new Error(`目前没有${key}该属性`)
        }
        target[key] = val
      }
    })

    box.innerHTML = obj.data
  </script>
</body>

</html>