vue双向数据绑定原理简单实现vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，vue2是通过Obj

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，vue2是通过Object.defineProperty()来实现数据劫持的，通过Object.defineProperty()方法来给数据添加set()和get()方法,set()来实现数据变化的消息发布，get()来实现对数据的变化消息的订阅,vue3通过Object.proxy方法实现。

<body>
    <div>
        输入姓名：<input id="input" type="text">
        <h2 id="h2"></h2>
    </div>

    <script>
        var obj = {name: ''}
        var inputNode = document.getElementById('input')
        var hNode = document.getElementById('h2')
        console.log(obj)
        Object.defineProperty(obj, 'name', {
            // 添加一个getter方法
            get: function() {
                console.log('调用了getter方法')
                // 不能再getter方法中获取这个数据
                // return obj.name
                // return inputNode.value
                return hNode.innerText
            },
            set(val) {
                console.log('调用了setter方法')
                console.log(val)
                inputNode.value = val
                hNode.innerText = val
            }
        })

        // console.log(obj.name)
        obj.name = '张三'

        inputNode.addEventListener('input', function() {
            obj.name = this.value
        })
        
        class Test {
            num

            // setter 方法，setter方法必须传递一个参数进行
            set number(val) {
                this.num = val
            }
            // getter 方法，在一个方法钱添加一个get标识，表明这个方法为一个getter方法，getter方法必须返回数据，否则值为undefined
            get number() {
                return this.num
            }
        }

        var test = new Test()
        console.log(test.number)
        test.number = 12000
        console.log(test.number)
    </script>