Vue 双向绑定原理

作者: 洪锦一 | 来源:发表于2021-10-14 13:10 被阅读0次

使用 defineProperty

<body>
    <input type="text" id="inputId">
    <p id="pId"></p>
    <script>
        /*
            defineProperty 定义属性

            第一个参数：要定义的对象
            第二个参数：要定义或修改的属性名称（任意名称）
            第三个参数：将被定义或修改的属性描述
        */

        var obj = {};
        Object.defineProperty(obj, 'name', {
            get() {
                // console.log("get");
                return obj;
            },
            set(newVal) {
                // console.log("set",newVal);
                document.getElementById("inputId").value = newVal;
                document.getElementById("pId").innerHTML = newVal;
            }
        });

        document.getElementById('inputId').addEventListener('keyup', function (e) {
            obj.name = e.target.value;
        })


        //2s后修改数据
        setTimeout(() => {
            obj.name = '8888'
        }, 2000)
    </script>
</body>