Vue数据双向绑定的实现

在实现双向绑定之前，先了解一个函数的作用：

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

想要对Object.defineProperty()这个函数有更深入的了解，这篇博客里有更详细的解释。

以下是用原生JS实现数据双向绑定的代码：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--新建div及input和h1用来显示存放和输入数据-->
<div id="app">
    <input id="myTnput" type="text">
    <h1 id="myH"></h1>
</div>

<script>
    let obj = {};
    Object.defineProperty(obj,"theName",{
        get() {
            //下面set定义了theName = v
            return theName;
        },
        set(v) {
            //修改innerHTML
            document.getElementById("myH").innerHTML = v;
            theName = v;
        }
    })
    var theInput = document.getElementById("myInput");
    //oninput函数 在输入时响应
    theInput.oninput = function (e) {
        obj.theName = e.target.value;
    }
</script>
</body>
</html>