双向绑定介绍以及vue双向绑定的原理说明

双向绑定的原理（vue）

简介：

双向绑定：指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使user对象的name属性做出相应的改变。

vue双向绑定的实现（2.0以上）

一：通过这个方法 Object.defineProperty 来实现 双向绑定 （ vue 2.x）

二：Object.proxy（代理）来实现Vue3.x的双向绑定，使用代理能够解决一些性能问题，解决了defineProperty这个方法的历史遗留问题（监听数组会产生监听失效的问题）

Object.defineProperty 来实现 双向绑定的原理代码简写

//代码如下
<script>
        var obj = {
            value: 0
        }
		//Object.defineProperty给对象绑定方法，有obj 和 obj需要设置属性的值
        Object.defineProperty(obj, "value", {
            // setter 方法，设置值的方法
            set(val) {
                console.log('current value:', val)
                document.getElementById('valueNode').innerText = val
            },
            // getter 方法，获取值的方法，必须实现放回值
            get() {
                console.log('dispatch getter function')
                // return obj.value
                return document.getElementById('valueNode').innerText
            }
        })

        function setValueEvt() {
            obj.value = window.event.currentTarget.value
        }
    </script>

Object.defineProperty 来实现 双向绑定的原理总结

​ 通过Object.defineProperty这个方法，给对象某个属性（如：value）设置set()方法和get()方法,当我们给对象属性value设置值的时候，就会调用set方法。当我们取value值得时候，就会触发get方法。get（）方法必须要有返回值