【揮舞JS】vue雙向數(shù)據(jù)綁定v-model實現(xiàn)原理

XanaHopper 發(fā)布于2019-08-23 13:48 / 361人閱讀

摘要：設(shè)計模式數(shù)據(jù)觀測原理在技術(shù)實現(xiàn)上，利用的是和存儲器屬性和所以只兼容及以上版本，可稱為基于依賴收集的觀測機(jī)制。核心是，即，保證數(shù)據(jù)和視圖的一致性。采用數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者模式的方式，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

MVVM設(shè)計模式 Model View ViewModel

Vue.js 數(shù)據(jù)觀測原理在技術(shù)實現(xiàn)上，利用的是ES5 Object.defineProperty()和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測機(jī)制。
核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性。Vue.js 采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

// Model
var data = {
    message: "",
    list: []
};

// ViewModel
var app = document.getElementById("app");
var Elements = app.querySelectorAll("[v-model]");
for (var i = 0; i < Elements.length; i++) {
    Elements[i].oninput = function () {
        data[this.getAttribute("v-model")] = this.value;
    }
}

Object.defineProperty(data, "message", {
    get: function () {
        return data.str;
    },
    set: function (val) {
        var Elements = app.querySelectorAll("[v-model=message]");
        for (var i = 0; i < Elements.length; i++) {
            Elements[i].value = val;
            Elements[i].innerText = val;
        }
        data.str = val;
    }
});