简易实现双向绑定

<input type="text " id='ipt' value="" oninput="iptChange(this.value)">
    <h3 id="title"></h3>
    <script>
       var ipt = document.getElementById('ipt')
       var title = document.getElementById('title')
        var data = {}
        Object.defineProperty(data, 'msg', {
            get: function () {
                return '你好世界'
            },
            set: function (newValue) {
                title.innerHTML = newValue
                ipt.value = newValue
            }
        })

        
        title.innerHTML = data.msg
        ipt.value = data.msg
        function iptChange(val) {
            data.msg = val
        }
    </script>

双向数据绑定原理（重点）

#1、vue 双向数据绑定原理

vue 双向数据绑定原理是通过 数据劫持 结合 发布订阅模式 的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

#2、核心

关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

#3、介绍一下Object.defineProperty()方法

• Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
• 简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法