这应该是最详细的响应式系统讲解了

2023-08-18 20:35:04 64

前言

本文从一个简单的双向绑定开始，逐步升级到由defineProperty和Proxy分别实现的响应式系统，注重入手思路，抓住关键细节，希望能对你有所帮助。

一、极简双向绑定

首先从最简单的双向绑定入手：

//html

//js
letinput=document.getElementById('input')
letspan=document.getElementById('span')
input.addEventListener('keyup',function(e){
span.innerHTML=e.target.value
})

以上似乎运行起来也没毛病，但我们要的是数据驱动，而不是直接操作dom：

//操作obj数据来驱动更新
letobj={}
letinput=document.getElementById('input')
letspan=document.getElementById('span')
Object.defineProperty(obj,'text',{
configurable:true,
enumerable:true,
get(){
console.log('获取数据了')
returnobj.text
},
set(newVal){
console.log('数据更新了')
input.value=newVal
span.innerHTML=newVal
}
})
input.addEventListener('keyup',function(e){
obj.text=e.target.value
})

以上就是一个简单的双向数据绑定，但显然是不足的，下面继续升级。

二、以defineProperty实现响应系统

在Vue3版本来临前以defineProperty实现的数据响应，基于发布订阅模式，其主要包含三部分：Observer、Dep、Watcher。

1.一个思路例子

//需要劫持的数据
letdata={
a:1,
b:{
c:3
}
}

//劫持数据data
observer(data)

//监听订阅数据data的属性
newWatch('a',()=>{
alert(1)
})
newWatch('a',()=>{
alert(2)
})
newWatch('b.c',()=>{
alert(3)
})

以上就是一个简单的劫持和监听流程，那对应的observer和Watch该如何实现？

2.Observer

observer的作用就是劫持数据，将数据属性转换为访问器属性，理一下实现思路：

①Observer需要将数据转化为响应式的，那它就应该是一个函数(类)，能接收参数。
②为了将数据变成响应式，那需要使用Object.defineProperty。
③数据不止一种类型，这就需要递归遍历来判断。

//定义一个类供传入监听数据
classObserver{
constructor(data){
letkeys=Object.keys(data)
for(leti=0;i
3.Watcher


根据newWatch('a',()=>{alert(1)})我们猜测Watch应该是这样的：
classWatch{
//第一个参数为表达式，第二个参数为回调函数
constructor(exp,cb){
this.exp=exp
this.cb=cb
}
}


那Watch和observer该如何关联？想想它们之间有没有关联的点？似乎可以从exp下手，这是它们共有的点：
classWatch{
//第一个参数为表达式，第二个参数为回调函数
constructor(exp,cb){
this.exp=exp
this.cb=cb
data[exp]//想想多了这句有什么作用
}
}


data[exp]这句话是不是表示在取某个值，如果exp为a的话，那就表示data.a，在这之前data下的属性已经被我们劫持为访问器属性了，那这就表明我们能触发对应属性的get函数，那这就与observer产生了关联，那既然如此，那在触发get函数的时候能不能把触发者Watch给收集起来呢？此时就得需要一个桥梁Dep来协助了。
4.Dep


思路应该是data下的每一个属性都有一个唯一的Dep对象，在get中收集仅针对该属性的依赖，然后在set方法中触发所有收集的依赖，这样就搞定了，看如下代码：
classDep{
constructor(){
//定义一个收集对应属性依赖的容器
this.subs=[]
}
//收集依赖的方法
addSub(){
//Dep.target是个全局变量，用于存储当前的一个watcher
this.subs.push(Dep.target)
}
//set方法被触发时会通知依赖
notify(){
for(leti=1;i
此时对应的defineReactive我们也要增加一些代码：
functiondefineReactive(data,key,val){
observer()
letdep=newDep()//新增：这样每个属性就能对应一个Dep实例了
Object.defineProperty(data,key,{
configurable:true,
enumerable:true,
get(){
dep.addSub()//新增：get触发时会触发addSub来收集当前的Dep.target，即watcher
returnval
},
set(newVal){
if(newVal===val){
return
}else{
data[key]=newVal
observer(newVal)
dep.notify()//新增：通知对应的依赖
}
}
})
}


至此observer、Dep、Watch三者就形成了一个整体，分工明确。但还有一些地方需要处理，比如我们直接对被劫持过的对象添加新的属性是监测不到的，修改数组的元素值也是如此。这里就顺便提一下Vue源码中是如何解决这个问题的：
对于对象：Vue中提供了Vue.set和vm.$set这两个方法供我们添加新的属性，其原理就是先判断该属性是否为响应式的，如果不是，则通过defineReactive方法将其转为响应式。
对于数组：直接使用下标修改值还是无效的，Vue只hack了数组中的七个方法：pop','push','shift','unshift','splice','sort','reverse'，使得我们用起来依旧是响应式的。其原理是：在我们调用数组的这七个方法时，Vue会改造这些方法，它内部同样也会执行这些方法原有的逻辑，只是增加了一些逻辑：取到所增加的值，然后将其变成响应式，然后再手动出发dep.notify()
三、以Proxy实现响应系统


Proxy是在目标前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写，我们可以这样认为，Proxy是Object.defineProperty的全方位加强版。
依旧是三大件：Observer、Dep、Watch，我们在之前的基础再完善这三大件。
1.Dep


letuid=0//新增：定义一个id
classDep{
constructor(){
this.id=uid++//新增：给dep添加id，避免Watch重复订阅
this.subs=[]
}
depend(){//新增：源码中在触发get时是先触发depend方法再进行依赖收集的，这样能将dep传给Watch
Dep.target.addDep(this);
}
addSub(){
this.subs.push(Dep.target)
}
notify(){
for(leti=1;i
2.Watch


classWatch{
constructor(exp,cb){
this.depIds={}//新增：储存订阅者的id，避免重复订阅
this.exp=exp
this.cb=cb
Dep.target=this
data[exp]
//新增：判断是否订阅过该dep，没有则存储该id并调用dep.addSub收集当前watcher
addDep(dep){
if(!this.depIds.hasOwnProperty(dep.id)){
dep.addSub(this)
this.depIds[dep.id]=dep
}
}
//新增：将订阅者放入待更新队列等待批量更新
update(){
pushQueue(this)
}
//新增：触发真正的更新操作
run(){
this.cb()
}
}
}

3.Observer


与Object.defineProperty监听属性不同，Proxy可以监听(实际是代理)整个对象，因此就不需要遍历对象的属性依次监听了，但是如果对象的属性依然是个对象，那么Proxy也无法监听，所以依旧使用递归套路即可。
functionObserver(data){
letdep=newDep()
returnnewProxy(data,{
get(){
//如果订阅者存在，进去depend方法
if(Dep.target){
dep.depend()
}
//Reflect.get了解一下
returnReflect.get(data,key)
},
set(data,key,newVal){
//如果值未变，则直接返回，不触发后续操作
if(Reflect.get(data,key)===newVal){
return
}else{
//设置新值的同时对新值判断是否要递归监听
Reflect.set(target,key,observer(newVal))
//当值被触发更改的时候，触发Dep的通知方法
dep.notify(key)
}
}
})
}

//递归监听
functionobserver(data){
//如果不是对象则直接返回
if(Object.prototype.toString.call(data)!=='[object,Object]'){
returndata
}
//为对象时则递归判断属性值
Object.keys(data).forEach(key=>{
data[key]=observer(data[key])
})
returnObserver(data)
}

//监听obj
Observer(data)


至此就基本完成了三大件了，同时其不需要hack也能对数组进行监听。
四、触发依赖收集与批量异步更新


完成了响应式系统，也顺便提一下Vue源码中是如何触发依赖收集与批量异步更新的。
1.触发依赖收集


在Vue源码中的$mount方法调用时会间接触发了一段代码：
vm._watcher=newWatcher(vm,()=>{
vm._update(vm._render(),hydrating)
},noop)


这使得newWatcher()会先对其传入的参数进行求值，也就间接触发了vm._render()，这其实就会触发了对数据的访问，进而触发属性的get方法而达到依赖的收集。
2.批量异步更新


Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际(已去重的)工作。Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setTimeout(fn,0)代替。
根据以上这段官方文档，这个队列主要是异步和去重，首先我们来整理一下思路：

需要有一个队列来存储一个事件循环中的数据变更，且要对它去重。
将当前事件循环中的数据变更添加到队列。
异步的去执行这个队列中的所有数据变更。

//使用Set数据结构创建一个队列，这样可自动去重
letqueue=newSet()

//在属性出发set方法时会触发watcher.update，继而执行以下方法
functionpushQueue(watcher){
//将数据变更添加到队列
queue.add(watcher)
//下一个tick执行该数据变更,所以nextTick接受的应该是一个能执行queue队列的函数
nextTick('一个能遍历执行queue的函数')
}

//用Promise模拟nextTick
functionnextTick('一个能遍历执行queue的函数'){
Promise.resolve().then('一个能遍历执行queue的函数')
}


以上已经有个大体的思路了，那接下来完成'一个能遍历执行queue的函数'：
//queue是一个数组，所以直接遍历执行即可
functionflushQueue(){
queue.forEach(watcher=>{
//触发watcher中的run方法进行真正的更新操作
watcher.run()
})
//执行后清空队列
queue=newSet()
}


还有一个问题，那就是同一个事件循环中应该只要触发一次nextTick即可，而不是每次添加队列时都触发：
//设置一个是否触发了nextTick的标识
letwaiting=false
functionpushQueue(watcher){
queue.add(watcher)
if(!waiting){
//保证nextTick只触发一次
waiting=true
nextTick('一个能遍历执行queue的函数')
}
}


完整代码如下：
//定义队列
letqueue=newSet()

//供传入nextTick中的执行队列的函数
functionflushQueue(){
queue.forEach(watcher=>{
watcher.run()
})
queue=newSet()
}

//nextTick
functionnextTick(flushQueue){
Promise.resolve().then(flushQueue)
}

//添加到队列并调用nextTick
letwaiting=false
functionpushQueue(watcher){
queue.add(watcher)
if(!waiting){
waiting=true
nextTick(flushQueue)
}
}


最后


以上就是响应式的一个大概原理，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
相关参考：
Vue源码学习


实现双向绑定Proxy比defineproperty优劣如何?


Vue.js源码全方位深入解析
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

这应该是最详细的响应式系统讲解了

热门推荐

随机推荐