淺談實現vue2.0響應式的基本思路，vue2.0基本思路

淺談實現vue2.0響應式的基本思路，vue2.0基本思路

最近看了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這部分的代碼。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。