<body>
<h1 id="h1">
</h1>
<input type="text" id="input">
<button id="button">change</button>
<script>
var data = {
msg : "我是一个数据"
}
**页面上的初始化**
h1.innerText = data.msg
input.value = data.msg
Object.defineProperty(obj, prop, descriptor)
参数说明：
1. obj:目标对象
2. prop 需定义或修改的属性的名字
3. descriptor 目标属性所拥有的特性
数据劫持 ， 这个api可以对一个对象的属性进行精确的控制
控制这个属性能够被赋值 能够被重写 能否被获取
控制这个属性的读取 或者 写入
get/set
**get 获取值 或者叫 读取**
**set 设置值 或者叫 赋值**
Object.defineProperty(data,"msg",{
get(){
**当我获取msg的值的时候 我希望获取到的是什么结果呢？**
return input.value
},
set(newValue){
**当我给msg属性赋值的时候 我希望做一些事情**
**data.msg ="咳咳"**
**因为要模拟双向数据绑定 那么得到的新的值 input与h1中的内容也要跟新的值一致**
**实际上在vue的底层这一步是通过观察者 / 订阅者模式实现**
h1.innerText = newValue;
input.value = newValue
}
})
button.onclick = function(){
data.msg += 1
}
input.onkeyup = function(){
**当键盘抬起的时候 我们让 data.msg 获取新的值 也就是对data.msg 重新赋值**
data.msg = input.value
console.log(data.msg)
}
</script></body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。