原生JavaScript实现v-model双向绑定，响应式原理

        在学习了响应式原理之后，我自己尝试用JavaScript原生实现了一下，发现对响应式原理和v-model的原理有了进一步的理解，要点就是通过事件和事件对象将用户输入的东西赋值给data，通过Object.defineproperty这个响应式的核心API去设置data的set和get，让更改的值能够反馈到视图上。废话不多说，上代码。

<input id="input" type="text">
<p id="text"></p >
<script>
        const input = document.getElementById('input')
const text = document.getElementById('text')
const data = {
    a: 1
};
//先绑定单向视图-》数据
input.addEventListener('input', function (e) {
    e = e || window.event
    data.a=e.target.value
})
function myModel(obj, property, val) {
    //初始化视图
    text.innerText=val;
    //响应式核心API Object.defineproperty
    Object.defineProperty(obj, property, {
        //设置get、set和闭包的val，将数据跟视图绑定，数据-》视图 
        get() {
            return val
        },
        set(newVal) {
            val = newVal
            input.value = val
            text.innerText = val
        }
    })
}
//测试是好习惯
myModel(data,'a',data.a)
setTimeout(()=>{
    data.a=2
},5000)
</script>

        代码还是很好懂的，如果看不懂，同学你需要去复习JavaScript的一些基础了，如事件、对象、闭包等。