最近看了vue2.0源碼關于響應式的實現，以下博文將通過簡單的代碼還原vue2.0關于響應式的實現思路。
注意，這里只是實現思路的還原，對于里面各種細節的實現，比如說數組里面數據的操作的監聽，以及對象嵌套這些細節本實例都不會涉及到，如果想了解更加細節的實現，可以通過閱讀源碼 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) return val = 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) return val = newVal dep.notify() } })} 第三步：實現一個 Watcher
Watcher的實現比較簡單，其實就是執行數據變化時我們要執行的操作
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函數，就可以知道視圖的更新需要哪些數據的支持，并把它記錄為數據的訂閱者。
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) return val = newVal dep.notify() } })}最后我們來看用一個代理實現將我們對data的數據訪問綁定在vue對象上
_proxy(key) { const self = this Object.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 = this Object.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) 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) <body> <div id="demo"> <div v-text="text"></div> </div> </body> 上面就是整個vue數據驅動部分的整個思路。如果想深入了解更細節的實現，建議深入去看vue這部分的代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
