面试过程,经常会遇到面试官问到 v-model的实现原理,作为一个vue使用者,这是必须了解的。
上面是数据绑定原理的图:
1、view ------》model (视图变,引起数据改变)
<div id="app">
<p></p>
<input type="text" />
</div>
<script src="vue.js"></script>
<script>
const data = {
msg: 'ddd',
}
const input = document.querySelector('input')
const p = document.querySelector('p')
input.value = data.msg
p.innerText = data.msg
//注册addeventListener事件
input.addEventListener('input', function () {
console.log('input', input)
data.msg = input.value
})
let result = data.msg
Object.defineProperty(data, 'msg', {
//劫持data中msg的改变
get: function () {},
//把新值赋予
set(newValue) {
result = newValue
input.value = newValue
p.innerText = newValue
},
})
</script>
通过注册input.addEventListener事件来改变数据中的值(msg)
2.model-------》view 数据变,引起视图的改变
如何知道数据的改变两种方式:
a.ES5中数据劫持, object.defineproperty(对象名,属性,方法)。
b.针对于anjuangular,早期使用的脏数据检查机制(性能比较低)。