Vue3解决问题之Proxy在Vue中的作用

前言

在讲解Proxy之前，我们有些前置知识点是必要掌握的：

1. Object相关静态函数
2. Reflect相关静态函数

简单说明知识盲点

名称	介绍
Object.isExtensible()	方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）
Object.setPrototypeOf()	方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或null
Object.preventExtensions()	方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。
Object.getOwnPropertyDescriptor()	方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）
Object.getPrototypeOf()	方法返回指定对象的原型（内部[[Prototype]]属性的值）。

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。可用来替换部分Object静态函数， 比较好的一点是__避免直接报错__

• 其和Object.xxx类似
  

Vue没有Proxy会怎么样？

参考文献：Vue中你可能认为是buf的情况原来是这样的

Vue问题总结

1. 数组元素基本数据类型无法响应式
2. 添加/删除对象属性很麻烦

proxy开始

• Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

  var proxy = new Proxy(target,handler)

参数组成

名称	描述
handler	包含陷阱（traps）的占位符对象。
traps	提供属性访问的方法。这类似于操作系统中捕获器的概念。
target	代理虚拟化的对象。它通常用作代理的存储后端。

画图演示

陷阱API

功能分类	API
操作值	set、get
操作属性	defineProperty、deleteProperty
操作函数	apply、construct
原型、属性描述符	见下文

获取及设置

		get(target, prop, receiver) {
   
            console.l