<!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>
<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 // 数据劫持 ， 这个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>
</html>