Proxy,Reflect,Vue2 - Vue3 响应式的原理

纯荔枝ikun
79 阅读4分钟

Vue2 的实现响应式原理,使用的是 Object.definedProty实现的数据的响应

Vue3 的实现响应式的原理,使用的是 proxy / Rrflect

promise

ES Module

我们需要监听对象的某些操作

对于对对象的操作

监听对象的操作

通过mustache语法将里面的数据获取

将获取到的值进行修改,这个就是对于对象进行的一个赋值的操作

一旦对于对象进行一个操作,就需要重新执行

监听这样的操作,来获取到值,渲染出虚拟的dom

渲染到真实的dom里面

image.png

image.png

一个是存取属性描述符

一个是访问属性描述符

这里的name 属性别被设置了值

现在在node里面进行一个测试,这里做了这样的一个打印操作

image.png

这里都是监听到的

这种里面,可以监听到这样的一个做法

image.png

设计初衷不是对于属性进行监听变化的

最主要目的是为了定义数据属性描述符

image.png

需要封装一些操作进行使用

Proxy 对于属性可以进行13种的监听方式

image.png

这个是监听一个对象,对于该操作所有的操作,都是通过代理对象完成的

代理对象可以监听我们想要对于原来对象的任何操作

当对于proxy对象进行操作的话,会将proxy的值传递到 原先的对象上面

我们可以重写里面的捕获器,对于这个对象进行一些操作

const p = new Proxy()

操作这个对象的时候对于另外的一个参数进行代理

image.png

访问的时候都是通过代理对象进行访问的

对于代理对象的操作,重写触发器的逻辑

image.png

receiver 调用的对象

proxy的所有捕获操作

如果想要对于对象进行一个监听的操作

in 的捕获器

has(target,key) {

}

delete操作

image.png

对于数据进行一个删除的操作

deletePrototype(target,key) { delete target[key] }

image.png

重写对应的捕获器就可以了

handler.getProtypeOf()

Object.getPrototypeOf

handler.setPrototypeOF()

handler.isExtensible()

image.png

在Proxy 里面进行监听的操作

image.png

除了这几个捕获器

handler 对于函数对象的

监听函数使用apply的操作,针对于函数的

image.png

我们在这里调用的

image.png

对于这样的对象进行一个代理的过程

image.png

一共有13中捕获器

如果想要进行捕获的话,可以使用Proxy()

一定是调用proxy的

响应式原理的时候用到了proxy的

Reflect 和 proxy 会一起来使用

Reflect也是在es6中的一个新增的一个API,它是一个对象,字面的意思就是反射

image.png

对于javascript 中的对象进行一个修改的操作

通过reflect 可以操作javascript 对象

函数本身也是对象

image.png

对于对象考虑一下,本身就是一个构造函数

本来就是创建这样的一个对象,是其它对象的父类

全部都放在Object上面

in delete 这样的操作符,在其他语言里面没有这样的操作符

把原来很多不规范的东西进行了规范

就是用来替代不属于Object上面的很多操作的

image.png

proxy 和 reflect 是一一进行对应的

这个就是最基本的使用过程

proxy 和 reflect 一起使用

image.png

这里会返回一个boolean类型的值,是否可以被修改

对于数据有更多的操作

image.png

这里可以实现对于数据的劫持操作

proxy 会对代理的对象的任何操作进行拦截(处理)

对于数据的拦截有一个监听的操作

proxy 这里就是进行的就是拦截的操作

但是我们需要写实现的逻辑

image.png

对于用户的操作进行拦截

对于对象进行一个代理操作的时候,违背了原先的一个初衷了

image.png

recervice 是为了改变this的指向的

当前的get 是不会经过校验的

这个设置值的过程只会执行一次

reciver 的作用就是改变 get / set 中的指向

image.png

这里进行一个响应式的编程

不管是什么,响应式原理是比较多的

每一步是可以手写出来源码

avatar
文章
阅读
粉丝