Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等),等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
基本语法:new Proxy(obj, handler)
它的handler有13种操作:具体看 官方文档
proxy是代理的意思,es7新增这个可以代理某个变量的“增删改查”,vue3 的核心原理就是这个~~
基本使用方法:
let json = {a: 123, c: 999} let p = new Proxy(json, { get(target, name, proxy){ return target[name] }, set(targe, name, value, proxy) { targe[name] = value }, deleteProperty(targe, name) { delete targe[name] }, has(target, name) { console.log(target, name) } }) //触发get console.log(p.a) //触发set p.b = 456 console.log(json) //触发deleteProperty delete p.c console.log(json) //触发has "b" in p
意思就是p代理了json对象的任何操作,就是说在对通过p对j'son进行“增删改查”的时候都是可以监听到的(分别触发get、set、deleteProperty、has方法),这个就是为什么vue.data中某个数据被修改后,可以实时地监测到并且被重新渲染了