MVVM小记1：利用Object.defineproperty实现数据双向绑定

1.首先解释一下什么是数据的双向绑定：

在vue中，视图和数据是可以同步更新的，当用户操作了视图中的数据之后可以直接更新到data，反过来，data变化之后也可以更新到视图。这大大解放了前端同学的双手，例如：遇到input输入框的值变化后，获取用户输入的值并赋值给某个变量时，再也不需要去手动操作dom元素，这个问题交给Object.defineproperty就好啦。

2.Object.defineproperty是干什么的？Object.defineproperty的API

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

语法：Object.defineProperty(obj,prop,descriptor)

参数：obj 要在其上定义属性的对象；prop 要定义或修改的属性的名称；descriptor 将被定义或修改的属性描述符。

利用descriptor参数对象中的存取描述符get和set 可以在obj的某个属性被取值和赋值时，添加回调函数，在此劫取数据去做我们想要的处理

3.手动实现input输入框内容改变同步至 data，data改变同步至input框

废话不多讲了直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>defineProperty数据双向绑定</title>
</head>
<body>
    <input type="text" id="input"/>
</body>
<script>
    let data = {};
    let input = document.querySelector('#input')
    Object.defineProperty(data,"test",{
        get: function (value) {
            console.log("取值",value)
        },
        set: function(value){
            console.log("赋值",value)
            input.value = value
            return value
        }
    })
    data.test = "123"
    input.addEventListener('change', (e) => {
        data.test = e.target.value
    })
</script>
</html>

这只是一个很基本的数据双向绑定，当需要监听的data数据比较复杂时，例如data的某个属性值是对象或者数组的情况，这个例子就不适用了，请等待后续更新...