vue中依赖项收集和响应的简单实现

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

开始

声明一个object man，可以看作vue中的数据

Letman={身高： 180，体重： 70，财富： 1000000}添加观察者

功能是将参数对象的属性变为响应，只要读取或修改对象的属性就可以观察到。然后创建一个新的Observer实例，并抛出man作为参数。这里的proxyData表示以人为参数的观察者实例的人的属性。

类观察者{构造函数(obj){ this . walk(obj)} walk(obj){ object . keys(obj)。forEach(prop={ this[prop]=obj[prop]this . proxy data(obj，prop) this.defineReactive(this，prop，obj[prop]))} } proxy data(obj，prop){ let _ this=this Object . defineeproperty(obj，prop，{get () {return _ this [prop]}，set(new val){ _ this[prop]=new val } })define reactive(obj，prop，val) {object。定义属性(obj，prop，{ get(){ console . log(` $)`)return val }，设置(new val){ if(new val==val)return val=new val console . log(` $ { prop }-已修改！`)} })} }新观察者(男)此时打印男

现在，man的属性都由对应于Observer实例的属性的getter返回，这只会在查看时触发

修改man的属性也将触发实例的相应属性的设置器

添加观察器

今天的Watcher有点像vue中的computed，实际上是定义一个计算属性，它依赖于以前人的一些属性，由它们来计算。

类观察器{构造函数(obj，prop，computed) {this。getval (obj，prop，computed)} getval (obj，prop，computed) {object。定义属性(obj，prop，{ get(){ console . log(` computed property-$ {)。`)返回computed ()}，set () {console。错误('无法修改计算属性！')} })} }新守望者(男，‘力量’，()={让{身高，体重}=男if(身高160体重70)返回‘强’返回‘弱’})

这似乎不是问题。如果依赖属性发生变化，则只能通过再次查看(get方法)来更新计算属性。但是，vue中的视图渲染是实时的，视图层依赖于数据层。当数据发生变化时，视图图层也会发生变化，因此无需手动更新。与此示例类似，当计算属性所依赖的属性发生变化时，如何通知计算属性，从而触发到期事件？

此时，我们首先向Watcher添加一个回调，用于处理当相关数据被修改时，我的计算属性应该如何响应

例如，当相关性被修改时，我们打印出这个计算属性的值

class Watcher { constructor(obj，prop，computed，callback) { this.getVal(obj，prop，computed，callback) }new Watcher(man，‘strength’，()={ let {height，weight }=man if(height 160 weight 70)return ' strong ' return ' weak ' }，()={ console . log(` I so $ { man . strength }！`) })一切都准备好了，那怎么实现呢？

让我们首先看看Watcher中的getVal方法

Getval (obj，prop，computed，callback) {object。定义属性(obj，prop，{ get(){ console . log(` computed property-$ { prop })被读取！`)返回computed ()}，set () {console。错误('无法修改计算属性！')}})}当我们查看计算属性时，我们将调用computed方法，这相当于查看它所依赖的身高和体重属性。在上面，我们已经使人的所有属性都有了get方法，也就是说，我们可以在查看它们时给它们回调吗？这时，我们引入了一个桥来连接观察者和观察者。

添加Dep

Dep的用处在于，当某个属性(以下简称‘自我’)是依赖的时候，它会收集依赖自己的粉丝(谁)，也就是Watcher(s)，如果粉丝发生变化可以及时通知粉丝。

类Dep { constructor(){ this。Deps=[]} GetDeps(){ if(！离开目标| |这个。德普斯。包括(Dep。目标))返回console.log('依赖添加副主任。目标)这个。德普斯。推动(dep。target)} notify(){ this。德普斯。foreach(dep={ dep()})} }这里的副目标就是前面所说的回收方法了。这时我们改一下看守人中的getVal

getVal(obj，prop，computed，callback){ object。definepreproperty(obj，prop，{ get(){ Dep。target=回调控制台。日志(`计算的属性- ${prop}被读取！`)返回computed() }，set() { console.error('计算属性不可被修改!') } })}在计算属性被查看时，将回收赋值给副目标，接下来就会调用其所依赖属性的吸气剂，我们只要在吸气剂里把回收给收集起来就行了。接下来修改依赖属性的吸气剂方法。

定义器激活(对象、道具、值){让Dep=新Dep()。对象。definepreproperty(obj，prop，{ get() { console.log(`${prop} -被读取！`)dep.getDeps() //依赖收集return val }，set(NewVaL){ if(NewVaL==VaL)return VaL=NewVaL控制台。日志(`$ { prop }-被修改！`) } })}这时看守人的回收都被依赖属性给收集起来了，当依赖属性发生变化时只要去运行这些回收就可以了。接下来就是修改依赖属性的作曲者方法。

定义器激活(对象、道具、值){让Dep=新Dep()。对象。definepreproperty(obj，prop，{ get() { console.log(`${prop} -被读取！`)dep.getDeps() return val }，set(NewVal){ if(NewVal==val)return val=NewVal控制台。日志(`$ { prop }-被修改！`)dep.notify() //运行所有回调} })}运行看看