手牽手帶你實現mini-vue_ZenDei技術網路在線

Vue 的雙向數據綁定實現原理是什麼樣的，如果讓我們自己去實現一個這樣的雙向數據綁定要怎麼做呢，本文就與大家分享一下 Vue 的綁定原理及其簡單實現 ...

1 前言

隨著 Vue、React、Angularjs 等框架的誕生，數據驅動視圖的理念也深入人心，就 Vue 來說，它擁有著雙向數據綁定、虛擬dom、組件化、視圖與數據相分離等等造福程式員的優點，那 Vue 的雙向數據綁定實現原理是什麼樣的，如果讓我們自己去實現一個這樣的雙向數據綁定要怎麼做呢，本文就與大家分享一下 Vue 的綁定原理及其簡單實現

2 核心技術

大家都知道 Vue2 雙向綁定是基於 ES5的 Object.defineProperty 方法+發佈訂閱者模式實現的那我們首先簡單瞭解一下這兩個模塊都是做什麼的，在 Vue 中充當了什麼角色

2.1 Object.defineProperty

用來在對象上定義或者修改一個屬性值，實現數據劫持，為修改數據後去調用視圖更新做準備

  const obj = {}
  let age = 18
  Object.defineProperty(obj, 'age',{
  get() {
      return age
   },
    set(newVal) {
     age = newVal + 1
    },
    enumerable: true
   })
 console.log(obj.age) // 18
 obj.age = 20
    console.log(obj.age) // 21

2.2 發佈訂閱者模式

此模式簡單來講就是分為發佈和訂閱兩個概念，訂閱意思就是我們會定義很多個訂閱者，每個訂閱者都會有自己的 update 方法，把需要更新的訂閱者放到數組中，而發佈就代表通知訂閱者去依次執行其 update 方法，從而實現數據更新

// 定義放訂閱者的數組
function Dep() {
  this.subs = []
}
// 定義存放訂閱者的方法
Dep.prototype.addSub = function(sub) {
  this.subs.push(sub)
}
// 定義發佈的方法
Dep.prototype.notify = function(sub) {
  this.subs.forEach(sub => {
    // 依次通知訂閱者去執行update方法
    sub.update()
  })
}

寫到這裡我們就把發佈和訂閱準備好了，但是還缺少訂閱者，且訂閱者要保證提供一個 update 方法才行，那我們不禁想到能否去創建一個構造函數，通過這個構造函數創建的實例都會有 update 方法呢

function Watcher(fn) {
  this.fn = fn
}
// 通過該構造函數創建的實例都會有update方法
Watcher.prototype.update = function() {
  this.fn()
}
// new實例
const watcher1 = new Watcher(() => console.log('我是watcher1'))
const watcher2 = new Watcher(() => console.log('我是watcher2'))
const dep = new Dep()
// 把準備好的事件放入到數組中
dep.addSub(watcher1)
dep.addSub(watcher2)
// 進行發佈
dep.notify()
// 最終輸出 我是watcher1 我是watcher2

3 具體實現

3.1 初始化

一個框架都是從它的初始化開始的，Vue 也不例外

<body>
    <div id="app">
      <p>a value: {{a.a}}</p>
      <div>b value: {{b}}</div>
      <span>v-model: </span><input type="text" v-model="b">
    </div>
    <script>
      // 模仿 Vue 的初始化和傳入的參數
      let vue = new Vue({
        el: '#app',
        data: {
          a: { a: 'is a' },
          b: 'is b',
          c: 'is c'
        }
      })
    </script>
  </body>

3.2 數據劫持 observe

Vue 中在 data 中定義的屬性才可以實現雙向綁定，為了實現這個功能，我們定義一個 Observe 用來劫持到對象的屬性

// 給對象增加數據劫持
function Observe(data) {
  // 因 defineProperty 每次只能設置單個屬性 所以需遍歷
  for (let key in data) {
    let val = data[key]
    observe(val)
    Object.defineProperty(data, key, {
      enumerable: true,
      get() {
        return val
      },
      set(newVal) {
        if (newVal === val) return // 新值與舊值相等時 不做處理
        val = newVal // 之所以給 val 賦值 是因為取值時取得val
        observe(newVal) // 當給變數值賦予一個新對象時 依然需要劫持到其屬性
      }
    })
  }
}
function observe(data) {
  if (typeof data !== 'object') return
  return new Observe(data)
}

3.3 構造函數編寫

 function Vue(options = {}) {
  //  模仿 Vue 把屬性掛載到 $options 且可以通過this._data訪問屬性
  this.$options = options
  const data = this._data = this.$options.data
  observe(data) // 給 data 增加數據劫持
}

上圖中我們模仿 Vue 對 options 和 data 增加了一些可訪問方式，給 data 增加了數據劫持，也在我們的實例中看到了效果，那這時又有了新的問題，Vue 中訪問數據都是 this.xxx 可直接通過實例訪問，這樣比我們圖中的訪問方式還要更方便一些，那我們也能否把屬性直接掛載到實例上呢，當然是可以的

3.4 數據代理

如果想要直接把屬性掛載到實例上，那我們需要保證通過實例直接訪問的屬性值是實時無誤的，且去修改該屬性值還能夠被劫持到，否則會影響後面的雙向數據綁定，既然 data 中的數據我們已經通過 Observe（在3.2節）做了劫持，那我們在通過 this.xxx 直接修改屬性時只需要去修改 data 對應中的屬性就可以觸發 Observe 劫持

 function Vue(options = {}) {
  //  模仿 Vue 把屬性掛載到 $options
  this.$options = options
  const data = this._data = this.$options.data
  observe(data)
  // 將當前 this 傳入方法 將屬性掛載到 this 上
  proxyData.call(this, data)
}

// this 代理 this._data
function proxyData(data) {
  const vm = this
  for (let key in data) {
    Object.defineProperty(vm, key, {
      enumerable: true,
      get() {
        return vm._data[key]
      },
      set(newVal) {
// 直接修改 data 中對應屬性 觸發 data 中劫持 保持數據統一
        vm._data[key] = newVal 
      }
    })
  }
}

3.5 實現 compile

先在記憶體中創建一個文檔碎片來遞歸所有 dom 節點，用正則匹配 {{}} 相符的節點，獲取到括弧里的 key，最後在 data 中拿到對應 key 的屬性值，替換到節點上（因為主要是實現雙向綁定，所以我們將 dom 的操作放到文檔碎片中操作來代替虛擬 dom）

function Compile(el, vm) {
  vm.$el = document.querySelector(el)
  // 建立文檔碎片 將 el 下的所有元素挪進文檔碎片 避免死迴圈
  const fragment = document.createDocumentFragment()
  // 將 el 中的元素都移入碎片中
  while (child = vm.$el.firstChild) {
    fragment.appendChild(child)
  }
  // 匹配節點中的{{}} 將其替換為對應的值
  replace(fragment)
  function replace(fragment) {
    // 迴圈每一層節點
    Array.from(fragment.childNodes).forEach(node => {
      const text = node.textContent
// 定義正則表達式
      const reg = /{{(.*)}}/
      // 此判斷為當節點是文本節點（因為變數都是文本）且被包含在{{}}中的文本節點時
// 文本節點 Node.TEXT_NODE: 3
      if (node.nodeType === Node.TEXT_NODE && reg.test(text)) {
// 以下三行為了獲取到 key 對應的value值 頁面初始化後正常將變數替換為值
        const arr = RegExp.$1.split('.') // [a, a]  [b]
        let val = vm
        arr.forEach(k => (val = val[k]))
        node.textContent = text.replace(reg, val)
      }
      if (node.childNodes) {
        replace(node)
      }
    })
  }
  // 將處理好的文檔碎片塞回dom中
  vm.$el.appendChild(fragment)
}

初始化 Vue 時調用 compile

 function Vue(options = {}) {
  //  模仿 Vue 把屬性掛載到 $options
  this.$options = options
  const data = this._data = this.$options.data
  observe(data)
  // 將當前 this 傳入方法 將屬性掛載到 this 上
  proxyData.call(this, data)
  new Compile(options.el, this)
}

3.6 Model -> ViewModel -> View

目前我們已經實現的功能：數據劫持、this代理、編譯模板，最終我們要達到修改數據、視圖自動更新的效果，還需要以下工作

1）第一步我們需要創建一個訂閱者，其 update 事件就是接收到我們更新後的數據值然後去更新 dom, 因為要更新 dom，所以此訂閱者是在 compile 中定義的，並且大家會發現我們在編譯過程中，是迴圈每一層節點去判斷的，也就意味著我們頁面有多少個符合條件的文本節點，就會新建多少個 watcher，那這時就需要把文本節點的對應 key 和 value 傳入 watcher 中，用來判斷更新的哪個節點值

2）既然我們的 watcher 新增了參數（vue 實例、節點變數）所以我們需要對 watcher 方法做出更改

3）當 watcher 定義好後，還需要修改下其 update 方法，因為我們的 watcher 第三個參數也就是回調函數中新增了參數，需要給其傳參

Watcher.prototype.update = function() {
  // this.exp 可取到 key 值 從 vm 中憑藉 key 就可以取到屬性值
  let val = this.vm
  const arr = this.exp.split('.')
  arr.forEach(k => (val = val[k]))
  this.fn(val) // 傳入 newVal
}

4）訂閱者都準備好了，還需要添加訂閱者到 dep 數組並且在數據改動後調用發佈，這個過程需要在 observe 中實現