【挥舞JS】vue双向数据绑定v-model实现原理

MVVM设计模式 Model View ViewModel

Vue.js 数据观测原理在技术实现上，利用的是ES5 Object.defineProperty()和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。
核心是VM，即ViewModel，保证数据和视图的一致性。Vue.js 采用数据劫持结合发布者-订阅者模式的方式，在数据变动时发布消息给订阅者，触发相应的监听回调。

<!--View-->
<div id="app">
    <p v-model="message"></p>
    <input type="text" v-model="message"/>
</div>

// 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;
    }
});