Proxy and Reflect
1. Proxy 1.1 proxy是什么 MDN给出的定义是: proxy对象用于定义基本操作的自定义行为, 例如属性查找, 赋值, 枚举, 函数调用等 proxy捕获对其目标对象进行的调用和操作, 然后可以更优雅的处理这些调用和操作, 它在目标对象周围创建了一个无法检测的屏障, 将所有操作重定向到处理程序对象 基本用法 使用new Proxy()来创建, 该构造函数接受两个必要的参数: 目标对象target和处理程序对象handler @理解: proxy相当于一个黑匣子, 封装对目标对象的处理, proxy的实例对象相当于对外暴露的接口,外部人员对目标对象的操作不再直接作用于目标对象, 而是通过proxy实例对象重定向到proxy内部的处理方法上(像get set等) , 最后再将处理后的最终结果返回给proxy实例 1.2 常用的代理方法 这些代理方法其实就是proxy对原生方法的监听, 然后用内部对应的方法去处理 1.2.1 get方法 可以接收三个参数: 目标对象、属性名、[ proxy实例 ] get方法可以看作是对目标对象取操作的代理 1.2.2 set方法 可以接收四个参数: 目标对象, 属性名, 属性值, [ proxy实例 ] set方法可以看作是对目标对象某个属性的赋值代理 1.2.3 deleteProperty方法 接收两个参数: 目标对象, 待删除的属性名 相当于delete obj.prop 1.2.4 […]
Read MoreVue2.0 vs Vue3.0 in reactive
前言 Vue3.0 的响应式底层是使用了 new Proxy() 对数据的 getter 和 setter 进行了拦截，过程中进行了依赖的收集，如果数据发生了变化，就会通知相应的依赖去做变化。如果了解过 Vue2.0 响应式原理应该就知道，Vue2.0的响应式底层是用 Object.defineProperty 进行实现的。为什么会有如此大的变化？这篇文章将通过学习 Vue2.0 和 Vue3.0 的源码比较两者在响应式实现上的差异。 响应式源码 Vue2.0项目地址 Vue3.0项目地址 MDN Object.defineProperty() Proxy Vue2.0 源码位置 \src\core\observer\index.js 响应式函数 defineReactive，初始化时需要循环频繁调用，因为 Object.defineProperty 每次只能对对象中的一个属性进行拦截操作，并且如果当前属性的值 val 也是一个对象就会调用一个观察者函数 observe(val)，为对象创建观察者 观察者函数 observe 中会创建并返回一个 ob 是 Observer 类的实例 Observer 类会执行其中的 walk 方法，walk 会对当前对象进行遍历并继续调用 defineReactive 这样就形成了一个递归调用 到这里就看出了使用 Object.defineProperty 方式进行响应式操作的一些缺点 每次只能监控一个key 初始化时需要循环递归遍历obj中的所有key，速度慢，并且会产生闭包，资源占用比较大 不能对 Collection […]
Read More
