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可以监听属性的新增删除操作
深层遍历嵌套的对象