双向数据绑定

我写了一个基本的双向数据绑定。

    <input type='text' id='inp'/>
    <p id='p'></p>
    
    //获取DOM节点
    let inp = document.getElementById("inp");
    let p = document.getElementById("p");
    
    let data = function() {
        //定义状态
        let datas = {
            value: '',
        };
        //定义访问器属性
        Object.defineProperty(datas, "values", {
            
            //定义set函数
            set: function (val){
                p.textContent = val;
                datas.value = val;
            }
        });
        //这一步，让Object.defineProperty运作
        datas.values = inp.value;
    }
    
    inp.addEventListener("input", data);

这种方法，当input标签输入内容时，会调用data函数，函数声名了一个datas对象，用来存储状态，然后再创建了一个访问器属性，当datas状态改变时，会调用里面的set设置函数，渲染p标签内容。