脚本宝典收集整理的这篇文章主要介绍了【挥舞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;
}
});
以上是脚本宝典为你收集整理的【挥舞JS】vue双向数据绑定v-model实现原理全部内容,希望文章能够帮你解决【挥舞JS】vue双向数据绑定v-model实现原理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。