前言
本文主要介绍
Vue2
的双向数据绑定的原理,简单通过代码实现
一.MVVM 是什么
Vue
和 React
都是 MVVM 模式,所以需要简单了解一下 MVVM 模式,更好的理解双向数据绑定/响应式
https://blog.csdn.net/cx18333/article/details/130937217?spm=1001.2014.3001.5501
二.发布者-订阅者模式
Vue2
的双向数据绑定/响应式是通过数据劫持
和 发布者-订阅者模式 来实现
https://blog.csdn.net/cx18333/article/details/130955620?spm=1001.2014.3001.5502
三.Vue数据双向绑定原理/响应式
墨迹了这么久下面开始正题啦!
Vue
是一个MVVM
框架,即数据双向绑定,Vue的双向绑定是通过数据劫持
结合发布者-订阅者模式
的方式来实现的。其原理是利用了ES5的Object.defineProperty()
方法,实现了对数据的监听。基本原理是将数据对象data的每个属性都转化为getter/setter,通过setter来监控数据的变化,在数据发生变化时触发对应的页面元素更新。
代码实现
<body>
<div id="app">
<input type="text" id="input" />
<p id="output"></p>
</div>
</body>
<script>
const input = document.getElementById('input')
const output = document.getElementById('output')
const model = { message: 'Hello World!' }
// 数据劫持
Object.defineProperty(model, 'message', {
// 在读取 model 的 message 属性时,get函数就会被调用,然后值就是 message
get: function () {
console.log('读取数据:', this._message)
return this._message
},
// 当修改 message 时,set属性会被调用,并且会收到修改的具体值
set: function (newVal) {
this._message = newVal
output.textContent = newVal // 更新页面
input.value = newVal // 实现双向绑定
}
})
// 修改数据,input元素绑定事件
input.addEventListener('keyup', function (event) {
model.message = event.target.value
})
// 显示初始页面
output.textContent = model.message
</script>