Vue3.0「十七」-- vue3.0升级新特性及Proxy重写响应式讲解

vue3.0 升级内容

全部用TS重写的（响应式、vdom、模本编译）
性能提升，减少代码量
会调整部分API
Proxy重写响应式

vue2.x 马上要过时了吗

vue3.0从正式发布到推广，还需要一段时间
vue2.x应用范围广，有大量项目需要维护升级
proxy存在兼容性问题，且不能ployfill

社区热门知识点：Proxy重写响应式讲解

回顾vue2.*的响应式原理 [object.defindeProperty]

object.defindeProperty缺点：

深度监听需要一次性递归
无法监听新增属性/删除属性（vue.set/vue.delete）
无法原生监听数组，需要特殊处理

vue3_Proxy实现响应式原理

前置知识

Proxy ES6语法对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。
Proxy 可以理解成，在目标对象之前架设一层“ 拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

语法：const p = new Proxy(target, handler)
target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
handler.get() 方法用于拦截对象的读取属性操作。
handler.set() 方法是设置属性值操作的捕获器。
handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法这些方法与proxy handlers的方法相同。

Reflect.get(target, propertyKey[, receiver])
Reflect.deleteProperty(target, propertyKey)
Reflect.set(target, propertyKey, value[, receiver])
target：需要取值的目标对象； key：需要获取的值的键值；value:：设置的值。
如果target对象中指定了getter， receiver则为getter调用时的this值