vue的雙向綁定原理淺析與簡單實現

好久以前看過vue的一些原理，對其中的雙向綁定原理也有必定程度上的瞭解，只是最近纔在項目上使用vue，這才決定好好了解下vue的實現原理，所以這裏對vue的雙向綁定原理進行淺析，並作一個簡單的實現。

vue雙向綁定的原理淺析

vue數據的雙向綁定是經過數據劫持，並結合發佈-訂閱模式的方式來實現的。

咱們先經過一個最簡單的vue例子來查看vue初始化數據上的對象究竟是什麼東西。

var vm = new Vue({
    data: { // 雙向綁定的數據對象
        obj: {
            a: 1
        }
    },
    created: function () { // 初始化事件
        console.log(this.obj);
    }
});

經過控制檯打印，咱們能夠看到屬性a有兩個相對應的get方法和set方法，這兩個方法的生成，是Object.defineProperty()方法來決定的。這樣咱們就能夠知道，vue是經過Object.defineProperty()方法來實現數據劫持，而後在其中的get方法和set方法作相應的操做來實現數據的雙向綁定的。

Object.defineProperty()方法的get和set屬性

Object.defineProperty()方法能夠用來控制一個對象的一些特有操做，好比讀寫權、是否能夠枚舉等，這裏只簡單分析它對應的兩個描述屬性get和set，這兩個屬性對應的屬性值是函數。要了解這個方法的更多屬性，能夠參考MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty。

若是你開發過Java應用，很容易就能想到get方法和set方法是用來獲取和設置對象的屬性值的，同時還能經過在get方法和set方法中添加一些特定的代碼來操做屬性值，而在這裏，狀況其實並無什麼不一樣。顧名思義，get方法就是在讀取對象的屬性值的時候觸發的事件函數，set方法啊就是在設置對象的屬性值的時候觸發的事件函數。

簡單實現

要實現mvvm的雙向綁定是須要另外的一些操做的，好比發佈-訂閱模式的應用和dom操做等，這裏只簡單實現其中的數據劫持，對其餘的原理不作深刻探討。

var Person = {}; // 定義一個Person對象
var name = ''; // 定義一個name屬性
// 給Person對象的name屬性綁定get和set事件函數
Object.defineProperty(Person, 'name', {
  set: function (value) {
    name = value;
    console.log('我愛的人是' + value);
  },
  get: function () {
    return '我愛' + name;
  }
})
 
Person.name = 'yanggb';  // 我愛的人是yanggb
console.log(Person.name);  // 我愛yanggb

這樣，咱們就在設置和讀取Person對象的name屬性的時候作了一些額外的加強操做，vue就是基於這種方法來進行對數據的劫持的。

 

"我仍是很喜歡你，像雲在風中綿綿，不問所起。"