VUE 3.0 Proxy浅谈

 

 

一、什么是Proxy ?

  • 1 . Proxy 这个词的原理为代理,在这里可以表示由它来“代理”某些操作,译为“代理器”。
  • 2 . Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改。
  • 3 . proxy接受一个待代理目标对象和一些包含元操作的对象,为待代理目标创建一个‘屏障’,并拦截所有操作,重定向到自定义的元操作对象上。

二、Proxy的实际用法

const p = new Proxy(target,handler)

target

要包装的目标对象Proxy。它可以是任何类型的对象,包括本机数组,函数甚至其他代理

  handler

  一个对象,其属性是定义对代理p执行操作时的行为的函数

VUE3.0升级Proxy的应用????

在VUE2.X版本中,响应式布局一个最重要的API就是Object.defineProperty,用这个API用来做数据劫持。

但是 defineProperty 的缺陷有以下几个:

  • 1.无法原生监听数组的变化,需要特殊处理
  • 2.必须遍历对象的每个属性(当示例初始化的时,Object.definePropety是从data的根节点遍历到末节点。一次性便利全部)
  • 3.无法监听属性的新增删除操作(VUE提供Vue.set Vue.delete API,原因就是因为Object.definePropety物件监听新增删除操作)

以下来验证一下Proxy是否会有同样的问题:

Proxy可以监听数组

 

 Proxy可以监听属性的新增删除操作

 

 深层遍历嵌套的对象

 

posted @ 2021-02-25 10:01  Tommy_marc  阅读(777)  评论(0编辑  收藏  举报