浅谈实现vue2.0响应式的基本思路

最近看了vue2.0源码关于响应式的实现，以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。

注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。

首先，我们先定义好实现vue对象的结构

rush:js;"> class Vue { constructor(options) { this.$options = options; this._data = options.data; this.$el = document.querySelector(options.el); } }

第一步：将data下面的属性变为observable

使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。

defineReactive(value,key,value[key],cb)) }

function defineReactive(obj,val,cb) {
Object.defineProperty(obj,{
enumerable: true,configurable: true,get: ()=>{
return val
},set: newVal => {
if(newVal === val)
return
val = newVal
}
})
}

第二步：实现一个消息订阅器

很简单，我们维护一个数组，这个数组，就放订阅者，一旦触发notify，订阅者就调用自己的update方法

watcher.cb()) } }

每次set函数，调用的时候，我们触发notify，实现更新

那么问题来了。谁是订阅者。对，是Watcher。。一旦 dep.notify()就遍历订阅者，也就是Watcher，并调用他的update()方法

{ if(newVal === val) return val = newVal dep.notify() } }) }

第三步：实现一个 Watcher

Watcher的实现比较简单，其实就是执行数据变化时我们要执行的操作

rush:js;"> class Watcher { 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函数，就可以知道视图的更新需要哪些数据的支持，并把它记录为数据的订阅者。

{ if(Dep.target){ dep.add(Dep.target) } return val },set: newVal => { if(newVal === val) return val = newVal dep.notify() } }) }

最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上

Object.keys(options.data).forEach(key => this._proxy(key))

下面就是整个实例的完整代码

this._proxy(key)) observer(options.data) watch(this,this._render.bind(this),this._update.bind(this)) } _proxy(key) { const self = this Object.defineProperty(self,set: function proxySetter (val) { self._data[key] = val } }) } _update() { console.log("我需要更新"); this._render.call(this) } _render() { this._bindText(); }

_bindText() {
let textDOMs=this.$el.querySelectorAll('[v-text]'),bindText;
for(let i=0;i<textDOMs.length;i++){
bindText=textDOMs[i].getAttribute('v-text');
let data = this._data[bindText];
if(data){
textDOMs[i].innerHTML=data;
}
}
}
}

function observer(value,set: newVal => {
if(newVal === val)
return
val = newVal
dep.notify()
}
})
}
function watch(vm,exp,cb){
Dep.target = new Watcher(vm,cb);
return exp()
}

class Watcher {
constructor(vm,cb) {
this.cb = cb
this.vm = vm
}
update(){
this.run()
}
run(){
this.cb.call(this.vm)
}
}

class Dep {
constructor() {
this.subs = []
}
add(watcher) {
this.subs.push(watcher)
}
notify() {
this.subs.forEach((watcher) => watcher.cb())
}
}
Dep.target = null；
var demo = new Vue({
el: '#demo',data: {
text: "hello world"
}
})

setTimeout(function(){
demo.text = "hello new world"

},1000)

上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现，建议深入去看vue这部分的代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。