关于Vue的双向数据绑定原理(一)Object.defineProperty

双向数据绑定

顾名思义:页面改变影响数据,数据改变也会影响页面

页面影响数据

首先是html代码结构

<body>
    <!-- onInput事件,当内容改变时,马上出发input事件 -->
    <!-- 在标签上绑定事件,要传入事件对象 -->
    <input type="text" id='myInp' onInput="fn(event)">
</body>

假设存储数据的对象

   let data = {
        msg: ""
    }

页面触发的函数事件

  let fn = function (ev) {
        // 使用ev.target,拿到触发事件的标签
        // console.log(ev.target.value)
        data.msg = ev.target.value
    }

测试:

这时候其实已经完成了页面输入值,改变了数据

数据影响数据

我们使用Object.defineProperty方法

 let _data = {
        msg: ""
    }

    Object.defineProperty(data, 'msg', {
        set(value) {
            document.getElementById("myInp").innerHTML = value;
            document.getElementById('myInp').value = value
            _data['msg']=value
        },
        get() {
            return _data['msg']
        }
    })

为什么要重新定义一个_data呢?

这里的_data和data其实是一个映射关系,因为当你获取data对象里的msg属性值的时候, 触发get方法
如果在get方法里直接提取data.msg的值, 会造成递归调用卡死.

完整代码

<body>
    <!-- onInput事件,当内容改变时,马上出发input事件 -->
    <!-- 在标签上绑定事件,要传入事件对象 -->
    <input type="text" id='myInp' onInput="fn(event)">
</body>

</html>
<script>
    // 首先定义一个fn()函数,接着触发事件的时候,会有ev事件对象
    let fn = function (ev) {
        // 使用ev.target,拿到触发事件的标签
        // console.log(ev.target.value)
        data.msg = ev.target.value
    }
    // 需要一个保存变量的地方
    let data = {
        msg: ""
    }
    // 双向数据绑定的原理,数据影响页面
    // 使用Object.defineProperty方法,
    // 第一个参数是需要监听的对象,第二个参数是键的值,
    // 第三个参数是触发set和get方法,固定写法
    let _data = {
        msg: ""
    }

    Object.defineProperty(data, 'msg', {
        set(value) {
            document.getElementById("myInp").innerHTML = value;
            document.getElementById('myInp').value = value
            _data['msg']=value
        },
        get() {
            return _data['msg']
        }
    })