view(视图)到model(数据)的变化通过事件监听方法addEventListener()。
model(数据)到view(视图)的变化是通过es5的数据劫持方法Object.defineProperty()。
vue内部设置Object.defineProperty()方法中的get和set操作,属性拦截方式,把data对象中的数据转化get和set,数据变化视图更新。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<input type="text">
<script>
// 数据
const data={
msg: 'hello'
}
const p = document.querySelector('p')
p.innerText = data.msg
const input = document.querySelector('input')
input.value = data.msg
input.addEventListener('input', function() {
data.msg = input.value
})
// 给对象 某个属性增加修饰
// 参数1:对象名
// 参数2:属性名
// 参数3:增加的修饰
let temp = data.msg
Object.defineProperty(data, 'msg', {
// 数据的劫持
// 当访问了data的msg属性,get方法就会触发
// get方法劫持了msg属性的获取操作
get() {
console.log('get', '访问msg值了');
return temp
},
// set方法劫持了msg属性的设置操作
set(value) {
console.log('set', '修改msg值了');
temp = value
p.innerText = value
input.value = value
}
})
</script>
</body>
</html>