vue3.0已经来了,我们本次先简单用defineProperty实现以下vue2.0的双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- view表单元素的值放生改变, 数据自动跟着改 model -->
<!-- model变量 view跟着变 -->
<input type="text">
<p></p>
<script>
var data = {
msg: 'hello vue'
}
</script>
<script>
var input = document.querySelector('input')
var p = document.querySelector('p')
input.value = data.msg
p.innerHTML = data.msg
// view变了 ----> data中数据跟着变
// 只要输入内容就会触发
input.oninput = function () {
data.msg = this.value
}
// model数据变了 -----> view也得变
// 难点: 如何知道数据是否发生了改变 angular1.6 脏检查机制 轮训
// 数据劫持: Object.defineProperty() ES5: 678
let temp = data.msg
Object.defineProperty(data, 'msg', {
get() {
return temp
},
set(value) {
temp = value
input.value = value
p.innerHTML = value
}
})
</script>
</body>
</html>