2. 程式人生 > 實用技巧 >【Vue原始碼】簡單實現Vue的雙向資料繫結：Object.defineProperty和Proxy

【Vue原始碼】簡單實現Vue的雙向資料繫結：Object.defineProperty和Proxy

阿新 • • 發佈：2020-07-25

雙向資料繫結無非就是，檢視 => 資料，資料 => 檢視的更新過程

以下的方案中的實現思路：

  1. 定義一個Vue的建構函式並初始化這個函式
  2. 實現資料層的更新：資料劫持，定義一個 obverse 函式重寫data的set和get
  3. 實現檢視層的更新：訂閱者模式，定義個 Watcher 函式實現對DOM的更新
  4. 將資料和檢視層進行繫結，解析指令v-bind、v-model、v-click
  5. 建立Vue例項

1.object.defineproperty方式實現雙向資料繫結

<!DOCTYPE html>
<html>
 
<head>
  <title
 
>myVue</title>
  <style>
    #app{
    text-align: center;
  }
</style>
</head>
 
<body>
  <div id="app">
    <form>
      <input type="text" v-model="number" />
      <button type="button" v-click="increment">增加</button>
    </form>
    <
 
h3 v-bind="number"></h3>
  </div>
</body>
<script>
 
  // 定義一個myVue建構函式
  function myVue(option) {
    this._init(option)
  }
 
  myVue.prototype._init = function (options) { // 傳了一個配置物件
    this.$options = options // options 為上面使用時傳入的結構體，包括el,data,methods
    this.$el = document.querySelector(options.el) 
 
// el是 #app, this.$el是id為app的Element元素
    this.$data = options.data // this.$data = {number: 0}
    this.$methods = options.methods // this.$methods = {increment: function(){}}
 
 
    // _binding儲存著model與view的對映關係，也就是我們前面定義的Watcher的例項。當model改變時，我們會觸發其中的指令類更新，保證view也能實時更新
    this._binding = {}
 
    this._obsever(this.$data)
    this._compile(this.$el)
  }
 
  // 資料劫持：更新資料
  myVue.prototype._obsever = function (obj) {
    let _this = this
    Object.keys(obj).forEach((key) => { // 遍歷obj物件
      if (obj.hasOwnProperty(key)) { // 判斷 obj 物件是否包含 key屬性
        _this._binding[key] = [] // 按照前面的資料，_binding = {number: []} 儲存 每一個 new Watcher
      }
      let value = obj[key]
      if (typeof value === 'object') { //如果值還是物件，則遍歷處理
        _this._obsever(value)
      }
      Object.defineProperty(_this.$data, key, {
        enumerable: true,
        configurable: true,
        get: () => { // 獲取 value 值
          return value
        },
        set: (newVal) => { // 更新 value 值
          if (value !== newVal) {
            value = newVal
            _this._binding[key].forEach((item) => { // 當number改變時，觸發_binding[number] 中的繫結的Watcher類的更新
              item.update() // 調 Watcher 例項的 update 方法更新 DOM
            })
          }
        }
      })
    })
  }
 
  // 訂閱者模式： 繫結更新函式，實現對 DOM 元素的更新
  function Watcher(el, data, key, attr) {
    this.el = el // 指令對應的DOM元素
    this.data = data // this.$data 資料: {number: 0, count: 0}
    this.key = key // 指令繫結的值，本例如"number"
    this.attr = attr // 繫結的屬性值，本例為"innerHTML"，"value"
 
    this.update()
  }
  // 比如 H3.innerHTML = this.data.number; 當number改變時，會觸發這個update函式，保證對應的DOM內容進行了更新
  Watcher.prototype.update = function () {
    this.el[this.attr] = this.data[this.key]
  }
 
  // 將view與model進行繫結，解析指令（v-bind,v-model,v-clickde）等
  myVue.prototype._compile = function (el) { // root 為id為app的Element元素，也就是我們的根元素
    let _this = this
    let nodes = Array.prototype.slice.call(el.children) // 將為陣列轉化為真正的陣列
    nodes.map(node => {
      if (node.children.length && node.children.length > 0) { // 對所有元素進行遍歷，並進行處理
        _this._compile(node)
      }
      if (node.hasAttribute('v-click')) { // 如果有v-click屬性，我們監聽它的onclick事件，觸發increment事件，即number++
        let attrVal = node.getAttribute('v-click')
        node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函式的作用域保持一致
      }
 
      // 如果有v-model屬性，並且元素是INPUT或者TEXTAREA，我們監聽它的input事件
      if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
        let attrVal = node.getAttribute('v-model')
 
        _this._binding[attrVal].push(new Watcher(
          node, // 對應的 DOM 節點
          _this.$data,
          attrVal, // v-model 繫結的值
          'value'
        ))
        node.addEventListener('input', () => {
          _this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致，已經實現了雙向繫結
        })
      }
      if (node.hasAttribute('v-bind')) {
        let attrVal = node.getAttribute('v-bind')
        _this._binding[attrVal].push(new Watcher(
          node,
          _this.$data,
          attrVal, // v-bind 繫結的值
          'innerHTML'
        ))
      }
    })
  }
 
 
  window.onload = () => { // 當文件內容完全載入完成會觸發該事件,避免獲取不到物件的情況
    new myVue({
      el: '#app',
      data: {
        number: 0,
        count: 0
      },
      methods: {
        increment() {
          this.number++
        },
        incre() {
          this.count++
        }
      }
    })
  }
</script>
 
</html>

2.Proxy 實現雙向資料繫結

<!DOCTYPE html>
<html>
 
<head>
  <title>myVue</title>
  <style>
    #app{
    text-align: center;
  }
</style>
</head>
 
<body>
  <div id="app">
    <form>
      <input type="text" v-model="number" />
      <button type="button" v-click="increment">增加</button>
    </form>
    <h3 v-bind="number"></h3>
  </div>
</body>
<script>
 
  // 定義一個myVue建構函式
  function myVue(option) {
    this._init(option)
  }
 
  myVue.prototype._init = function (options) { // 傳了一個配置物件
    this.$options = options // options 為上面使用時傳入的結構體，包括el,data,methods
    this.$el = document.querySelector(options.el) // el是 #app, this.$el是id為app的Element元素
    this.$data = options.data // this.$data = {number: 0}
    this.$methods = options.methods // this.$methods = {increment: function(){}}
 
    this._binding = {}
    this._obsever(this.$data)
    this._complie(this.$el)
 
  }
 
// 資料劫持：更新資料
myVue.prototype._obsever = function (data) {
    let _this = this
    let handler = {
      get(target, key) {
        return target[key]; // 獲取該物件上key的值
      },
      set(target, key, newValue) {
        let res = Reflect.set(target, key, newValue); // 將新值分配給屬性的函式
        _this._binding[key].map(item => {
          item.update();
        });
        return res;
      }
    };
    // 把代理器返回的物件代理到this.$data，即this.$data是代理後的物件，外部每次對this.$data進行操作時，實際上執行的是這段程式碼裡handler物件上的方法
    this.$data = new Proxy(data, handler);
  }
 
  // 將view與model進行繫結，解析指令（v-bind,v-model,v-clickde）等
  myVue.prototype._complie = function (el) { // el 為id為app的Element元素，也就是我們的根元素
    let _this = this
    let nodes = Array.prototype.slice.call(el.children) // 將為陣列轉化為真正的陣列
 
    nodes.map(node => {
      if (node.children.length && node.children.length > 0) this._complie(node)
      if (node.hasAttribute('v-click')) { // 如果有v-click屬性，我們監聽它的onclick事件，觸發increment事件，即number++
        let attrVal = node.getAttribute('v-click')
        node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函式的作用域保持一致
      }
 
      // 如果有v-model屬性，並且元素是INPUT或者TEXTAREA，我們監聽它的input事件
      if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
        let attrVal = node.getAttribute('v-model')
        
        console.log(_this._binding)
        if (!_this._binding[attrVal]) _this._binding[attrVal] = []
        _this._binding[attrVal].push(new Watcher(
          node, // 對應的 DOM 節點
          _this.$data,
          attrVal, // v-model 繫結的值
          'value',
        ))
        node.addEventListener('input', () => {
          _this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致，已經實現了雙向繫結
        })
      }
      if (node.hasAttribute('v-bind')) {
        let attrVal = node.getAttribute('v-bind')
        if (!_this._binding[attrVal]) _this._binding[attrVal] = []
        _this._binding[attrVal].push(new Watcher(
          node,
          _this.$data,
          attrVal, // v-bind 繫結的值
          'innerHTML',
        ))
      }
 
    })
  }
  // 繫結更新函式，實現對 DOM 元素的更新
  function Watcher(el, data, key, attr) {
    this.el = el // 指令對應的DOM元素
    this.data = data // 代理的物件 this.$data 資料: {number: 0, count: 0}
    this.key = key // 指令繫結的值，本例如"num"
    this.attr = attr // 繫結的屬性值，本例為"innerHTML"，"value"
 
    this.update()
  }
  // 比如 H3.innerHTML = this.data.number; 當number改變時，會觸發這個update函式，保證對應的DOM內容進行了更新
  Watcher.prototype.update = function () {
    this.el[this.attr] = this.data[this.key]
  }
 
  window.onload = () => { // 當文件內容完全載入完成會觸發該事件,避免獲取不到物件的情況
    new myVue({
      el: '#app',
      data: {
        number: 0,
        count: 0
      },
      methods: {
        increment() {
          this.number++
        },
        incre() {
          this.count++
        }
      }
    })
  }
</script>
 
</html>

3.將上面程式碼改成class的寫法

<!DOCTYPE html>
<html>
 
<head>
  <title>myVue</title>
  <style>
    #app{
    text-align: center;
  }
</style>
</head>
 
<body>
  <div id="app">
    <form>
      <input type="text" v-model="number" />
      <button type="button" v-click="increment">增加</button>
    </form>
    <h3 v-bind="number"></h3>
  </div>
</body>
<script>
 
  class MyVue {
    constructor(options) { // 接收了一個配置物件
      this.$options = options // options 為上面使用時傳入的結構體，包括el,data,methods
      this.$el = document.querySelector(options.el) // el是 #app, this.$el是id為app的Element元素
      this.$data = options.data // this.$data = {number: 0}
      this.$methods = options.methods // this.$methods = {increment: function(){}}
 
      this._binding = {}
      this._obsever(this.$data)
      this._complie(this.$el)
    }
    _obsever (data) { // 資料劫持：更新資料
      let _this = this
      let handler = {
        get(target, key) {
          return target[key]; // 獲取該物件上key的值
        },
        set(target, key, newValue) {
          let res = Reflect.set(target, key, newValue); // 將新值分配給屬性的函式
          _this._binding[key].map(item => {
            item.update();
          });
          return res;
        }
      };
      // 把代理器返回的物件代理到this.$data，即this.$data是代理後的物件，外部每次對this.$data進行操作時，實際上執行的是這段程式碼裡handler物件上的方法
      this.$data = new Proxy(data, handler);
    }
    _complie(el) { // el 為id為app的Element元素，也就是我們的根元素
      let _this = this
      let nodes = Array.prototype.slice.call(el.children) // 將為陣列轉化為真正的陣列
 
      nodes.map(node => {
        if (node.children.length && node.children.length > 0) this._complie(node)
        if (node.hasAttribute('v-click')) { // 如果有v-click屬性，我們監聽它的onclick事件，觸發increment事件，即number++
          let attrVal = node.getAttribute('v-click')
          node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函式的作用域保持一致
        }
 
        // 如果有v-model屬性，並且元素是INPUT或者TEXTAREA，我們監聽它的input事件
        if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
          let attrVal = node.getAttribute('v-model')
          if (!_this._binding[attrVal]) _this._binding[attrVal] = []
          _this._binding[attrVal].push(new Watcher(
            node, // 對應的 DOM 節點
            _this.$data,
            attrVal, // v-model 繫結的值
            'value',
          ))
          node.addEventListener('input', () => {
            _this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致，已經實現了雙向繫結
          })
        }
        if (node.hasAttribute('v-bind')) {
          let attrVal = node.getAttribute('v-bind')
          if (!_this._binding[attrVal]) _this._binding[attrVal] = []
          _this._binding[attrVal].push(new Watcher(
            node,
            _this.$data,
            attrVal, // v-bind 繫結的值
            'innerHTML',
          ))
        }
 
      })
    }
  }
 
  class Watcher {
    constructor (el, data, key, attr) {
      this.el = el // 指令對應的DOM元素
      this.data = data // 代理的物件 this.$data 資料: {number: 0, count: 0}
      this.key = key // 指令繫結的值，本例如"num"
      this.attr = attr // 繫結的屬性值，本例為"innerHTML"，"value"
      this.update()
    }
 
    update () {
      this.el[this.attr] = this.data[this.key]
    }
  }
 
  
 
  window.onload = () => { // 當文件內容完全載入完成會觸發該事件,避免獲取不到物件的情況
    new MyVue({
      el: '#app',
      data: {
        number: 0,
        count: 0
      },
      methods: {
        increment() {
          this.number++
        },
        incre() {
          this.count++
        }
      }
    })
  }
</script>
 
</html>

參照：https://blog.csdn.net/weixin_41845146/article/details/85268973

面試題：你能寫一個 Vue 的雙向資料繫結嗎？

相關推薦

【Vue原始碼】簡單實現Vue的雙向資料繫結：Object.defineProperty和Proxy

雙向資料繫結無非就是，檢視 => 資料，資料 => 檢視的更新過程 以下的方案中的實現思路：

關於簡單的資料雙向繫結原理，defineProperty 和Proxy演示

雙向繫結，也就是說js中的資料傳到頁面，頁面中的內容到js，實現同步更新，簡單的演示可以直接複製下放HTML程式碼執行。

vue學習---Object.defineproperty方法(理解資料代理 簡單實現資料雙向資料繫結)

<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\" /> <title>回顧Object.defineproperty方法</title>

vue.js自定義元件實現v-model雙向資料繫結的示例程式碼

我們都清楚v-model其實就是vue的一個語法糖，用於在表單控制元件或者元件上建立雙向繫結。

23.Vue中雙向資料繫結是如何實現的

vue中如何實現資料的雙向繫結   vue中如何實現資料的雙向繫結  vue中的指令      v-cloak：      v-model（表單元素設定了之

Vue Object.defineProperty及ProxyVue實現雙向資料繫結

雙向資料繫結無非就是，檢視 => 資料，資料 => 檢視的更新過程 以下的方案中的實現思路：

Vue雙向資料繫結實現

本篇檔案來記錄Vue雙向資料繫結的實現。 一、知識點 什麼是雙向資料繫結（MVVM）？

APICloud開發者進階之路|【案例原始碼】簡單時間軸

基於業務上的需要，自己做了一個簡單的時間軸例子，網上找到色調,先放圖 因為想做透明頭部,但是win頁面開啟frm頁面後,會遮住win頁面的頭部,所以就取消了win頁面的header標籤,下面是win頁面的程式碼：

vue實現簡易的雙向資料繫結

主要是通過資料劫持和釋出訂閱一起實現的 雙向資料繫結 資料更新時,可以更新檢視 檢視的資料更新是,可以反向更新模型

vue 2 實現自定義元件一到多個v-model雙向資料繫結的方法

前言有時候我們需要對一個元件繫結自定義 v-model，以更方便地實現雙向資料，例如自定義表單輸入控制元件。

vue如何實現雙向資料繫結

Object.defineProperty() <template> <view class=\"pt-72 txt-center\"> <image :src=\"imgUrl + \'success.png\'\" style=\"width: 104rpx;height: 104rpx;\"></image>

vue中的雙向資料繫結原理與常見操作技巧詳解

本文例項講述了vue中的雙向資料繫結原理與常見操作技巧。分享給大家供大家參考，具體如下：

vue-雙向資料繫結獲取表單form所有值

本文使用vue強大功能之一v-model雙向資料繫結實現一鍵獲取表單所有的值,都存在一個物件裡面，使用JSON.stringify轉換後直接得到ajax中就可以了

Vue 單向資料流&雙向資料繫結原理

Vue 的資料流本質上是單向資料流，而我們平時說的雙向資料繫結，只是Vue的一個語法糖，也就是說，Vue在資料流方面既可以實現單向資料流也可以實現雙向資料繫結。

vue雙向資料繫結

vue.js是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥來渲染檢視。

Vue雙向資料繫結(MVVM)的原理

MVVM 　　MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向資料繫結，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的資料雙向繫結。

Vue學習——vue的雙向資料繫結原理

Vue的雙向資料繫結原理？ Vue是根據資料劫持結合釋出者-訂閱者模式來實現雙向資料繫結的，利用object.defaultProperty()方法來獲取每個屬性 的setter,getter，在資料變動的時候分佈訊息給訂閱者，觸發響應的監聽回撥

Vue-雙向資料繫結(v-model)

技術標籤：Vue <div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能實現資料的單向繫結, 從 M 自動繫結到 V，不能實現資料的雙向繫結 -->

深度挖掘vue及雙向資料繫結原理

技術標籤：vuevue.js 本文簡單模擬vue的實現過程以及雙向資料繫結的原理，雙綁原理在面試時基本上是逃不過的問題。

模擬Vue雙向資料繫結原理

資料變頁面變 1.資料變頁面一定變嗎？什麼情況下不會變？怎麼解決問題 參考{