浅谈实现vue2.0响应式的基本思路
最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。
注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象嵌套这些细节本实例都不会涉及到,如果想了解更加细节的实现,可以通过阅读源码observer文件夹以及instance文件夹里面的state文件具体了解。
首先,我们先定义好实现vue对象的结构
classVue{ constructor(options){ this.$options=options; this._data=options.data; this.$el=document.querySelector(options.el); } }
第一步:将data下面的属性变为observable
使用Object.defineProperty对数据对象做属性get和set的监听,当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以触发了。
//数据劫持,监控数据变化 functionobserver(value,cb){ Object.keys(value).forEach((key)=>defineReactive(value,key,value[key],cb)) } functiondefineReactive(obj,key,val,cb){ Object.defineProperty(obj,key,{ enumerable:true, configurable:true, get:()=>{ returnval }, set:newVal=>{ if(newVal===val) return val=newVal } }) }
第二步:实现一个消息订阅器
很简单,我们维护一个数组,这个数组,就放订阅者,一旦触发notify,订阅者就调用自己的update方法
classDep{ constructor(){ this.subs=[] } add(watcher){ this.subs.push(watcher) } notify(){ this.subs.forEach((watcher)=>watcher.cb()) } }
每次set函数,调用的时候,我们触发notify,实现更新
那么问题来了。谁是订阅者。对,是Watcher。。一旦dep.notify()就遍历订阅者,也就是Watcher,并调用他的update()方法
functiondefineReactive(obj,key,val,cb){ constdep=newDep() Object.defineProperty(obj,key,{ enumerable:true, configurable:true, get:()=>{ returnval }, set:newVal=>{ if(newVal===val) return val=newVal dep.notify() } }) }
第三步:实现一个Watcher
Watcher的实现比较简单,其实就是执行数据变化时我们要执行的操作
classWatcher{ constructor(vm,cb){ this.cb=cb this.vm=vm } update(){ this.run() } run(){ this.cb.call(this.vm) } }
第四步:touch拿到依赖
上述三步,我们实现了数据改变可以触发更新,现在问题是我们无法将watcher与我们的数据联系到一起。
我们知道data上的属性设置defineReactive后,修改data上的值会触发set。那么我们取data上值是会触发get了。所以可以利用这一点,先执行以下render函数,就可以知道视图的更新需要哪些数据的支持,并把它记录为数据的订阅者。
functiondefineReactive(obj,key,val,cb){ constdep=newDep() Object.defineProperty(obj,key,{ enumerable:true, configurable:true, get:()=>{ if(Dep.target){ dep.add(Dep.target) } returnval }, set:newVal=>{ if(newVal===val) return val=newVal dep.notify() } }) }
最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上
_proxy(key){ constself=this Object.defineProperty(self,key,{ configurable:true, enumerable:true, get:functionproxyGetter(){ returnself._data[key] }, set:functionproxySetter(val){ self._data[key]=val } }) } Object.keys(options.data).forEach(key=>this._proxy(key))
下面就是整个实例的完整代码
classVue{ constructor(options){ this.$options=options; this._data=options.data; this.$el=document.querySelector(options.el); Object.keys(options.data).forEach(key=>this._proxy(key)) observer(options.data) watch(this,this._render.bind(this),this._update.bind(this)) } _proxy(key){ constself=this Object.defineProperty(self,key,{ configurable:true, enumerable:true, get:functionproxyGetter(){ returnself._data[key] }, set:functionproxySetter(val){ self._data[key]=val } }) } _update(){ console.log("我需要更新"); this._render.call(this) } _render(){ this._bindText(); } _bindText(){ lettextDOMs=this.$el.querySelectorAll('[v-text]'), bindText; for(leti=0;idefineReactive(value,key,value[key],cb)) } functiondefineReactive(obj,key,val,cb){ constdep=newDep() Object.defineProperty(obj,key,{ enumerable:true, configurable:true, get:()=>{ if(Dep.target){ dep.add(Dep.target) } returnval }, set:newVal=>{ if(newVal===val) return val=newVal dep.notify() } }) } functionwatch(vm,exp,cb){ Dep.target=newWatcher(vm,cb); returnexp() } classWatcher{ constructor(vm,cb){ this.cb=cb this.vm=vm } update(){ this.run() } run(){ this.cb.call(this.vm) } } classDep{ constructor(){ this.subs=[] } add(watcher){ this.subs.push(watcher) } notify(){ this.subs.forEach((watcher)=>watcher.cb()) } } Dep.target=null; vardemo=newVue({ el:'#demo', data:{ text:"helloworld" } }) setTimeout(function(){ demo.text="hellonewworld" },1000)
上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现,建议深入去看vue这部分的代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。