注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。
首先，我们先定义好实现vue对象的结构
class Vue {constructor(options) {this.$options = options;this._data = options.data;this.$el = document.querySelector(options.el);}
}
第一步：将data下面的属性变为observable
使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。
//数据劫持，监控数据变化
function observer(value, cb){Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}function defineReactive(obj, key, val, cb) {Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{return val},set: newVal => {if(newVal === val)returnval = newVal}})
}
第二步：实现一个消息订阅器
很简单，我们维护一个数组，这个数组，就放订阅者，一旦触发notify，订阅者就调用自己
的update方法
class Dep {constructor() {this.subs = []}add(watcher) {this.subs.push(watcher)}notify() {this.subs.forEach((watcher) => watcher.cb())}
}
每次set函数，调用的时候，我们触发notify，实现更新
那么问题来了。谁是订阅者。对，是Watcher。。一旦 dep.notify()就遍历订阅者，也就是Watcher，并调用他的update()方法
function defineReactive(obj, key, val, cb) {const dep = new Dep()Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{return val},set: newVal => {if(newVal === val)returnval = newValdep.notify()}})
}
第三步：实现一个 Watcher
Watcher的实现比较简单，其实就是执行数据变化时我们要执行的操作
class Watcher {constructor(vm, cb) {this.cb = cbthis.vm = vm}update(){this.run()}run(){this.cb.call(this.vm)}
}
第四步：touch拿到依赖
上述三步，我们实现了数据改变可以触发更新，现在问题是我们无法将watcher与我们的数据联系到一起。
我们知道data上的属性设置defineReactive后，修改data 上的值会触发 set。那么我们取data上值是会触发 get了。所以可以利用这一点，先执行以下render函数，就可以知道视图的更新需要哪些数据的支持，并把它记录为数据的订阅者。
function defineReactive(obj, key, val, cb) {const dep = new Dep()Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{if(Dep.target){dep.add(Dep.target)}return val},set: newVal => {if(newVal === val)returnval = newValdep.notify()}})
}
最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上
_proxy(key) {const self = thisObject.defineProperty(self, key, {configurable: true,enumerable: true,get: function proxyGetter () {return self._data[key]},set: function proxySetter (val) {self._data[key] = val}})
}Object.keys(options.data).forEach(key => this._proxy(key))
下面就是整个实例的完整代码
class Vue {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) {const self = thisObject.defineProperty(self, key, {configurable: true,enumerable: true,get: function proxyGetter () {return self._data[key]},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, cb){Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}function defineReactive(obj, key, val, cb) {const dep = new Dep()Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{if(Dep.target){dep.add(Dep.target)}return val},set: newVal => {if(newVal === val)returnval = newValdep.notify()}})
}
function watch(vm, exp, cb){Dep.target = new Watcher(vm,cb);return exp()
}class Watcher {constructor(vm, cb) {this.cb = cbthis.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)
<body><div id="demo"><div v-text="text"></div></div></body>
上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现，建议深入去看vue这部分的代码。
感谢vue慕课响应式手记
