VUE实现双向数据绑定的原理

通过v-model实现双向数据绑,其原理是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）

例子代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中v-model双向数据绑定实现原理</title>
</head>

<body>
    <div>
        <input type="text" id="ins" />
        <span id="b"></span>
    </div>
    <script>
        let obj = {};
        let nameValue = "";
        Object.defineProperty(obj, "name", {
            set(value) {
                // ins.value = nameValue = value;
                nameValue = value;
                ins.value = value;
                // document.getElementById('ins').value = val;//让文本框的内容等于val
                document.getElementById('b').innerHTML = nameValue;//让span的内容等于val
            },
            get() {
                return nameValue;
            }
        })
        // 双向绑定：其实描述的就是视图和数据的关系，视图的变化会同步更新数据，数据变化也会同步更新视图
        // 1. 视图中用户输入数据的时候，我们需要获取到用户的输入，然后赋值给obj.name
        // 1.1 注册事件
        let ins = document.querySelector("#ins");
        ins.oninput = function () {
            // 1.2 获取用户的输入
            // 1.3 赋值给obj.name
            obj.name = this.value;
            console.log(obj.name)
        };
        // 2. 数据在发生改变的时候，我们需要把数据赋值给input框
        // 当用户通过=给obj.name赋值的时候，会触发上面的set方法
        // 我们只需要在set方法中，把当前的更新的数据，赋值给input框即可
        // obj.name = "123";
    </script>
</body>

</html>