Vue2.X的数据双向绑定原理以及Vue3.X的数据双向绑定原理

1.Vue2.X的数据双向绑定原理：采用的是Object.defineProperty()方法

<!-- 1.Vue2.x采用的数据双向绑定原理 -->
    <input type="text" v-model>
    <p v-bind></p>
    <script>
        // 1.获取行内属性[v-model]
        let txt = document.querySelector('[v-model]');
        // 2.input框实现输入值
        txt.oninput = function(){
            // 3.将获取到的值赋给obj.name
            obj.name = txt.value;
        }

        let obj = {};
        // 4.IE8以及以下浏览器不识别该用法，自带了get和set方法
        // get的得到值变化，set是设置值的变化
        Object.defineProperty(obj,'name', {
            get(){
                console.log('get被调用了');
            },
            // set自带一个参数
            set(value){
                console.log('set被调用了');
                // 获取到p的属性
                let p = document.querySelectorAll('[v-bind]')[0];
                // 赋值
                p.innerHTML = value;
            }
        });

        // obj.name = 'summer';  // 触发了set
        // console.log(obj.name); // 触发了get
    </script>

 

2.Vue3.0实现数据的双向绑定原理：采用的是Proxy方法,proxy是个对象

<input type="text" v-model>
    <p v-bind></p>
    <script>
        let txt = document.querySelector('[v-model]');
        txt.oninput = function(){
           p.obj = txt.value;
        }


        let obj = {};
        let p = new Proxy(obj,{
            // 1.目标对象
            // 2.被获取的属性值
            // 3.Proxy或继承Proxy
            get(data, property, receiver){
                // console.log('get被调用了');
            },
            // 1.目标对象
            // 2.被获取的属性值
            // 3.被获取的value值
            // 4.最初被调用的对象Proxy
            set(data, property, value, receiver){
                // console.log('set被调用了');
                let p = document.querySelectorAll('[v-bind]')[0];
                p.innerHTML = value;       
            }
        });

        // p.name = 'summer';  // set被调用了
        // console.log(p.name); // get被调用了
        
    </script>

3.proxy比Object.defineProperty好在哪里？

proxy优势：

A.可以直接监听对象而非属性

B.可以直接监听数组的变化

C.Proxy有多达13种拦截方式，不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的

D.Proxy返回的是一个新对象，可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改

Object.defineProperty的优势：

A.兼容性好，支持IE9，而Proxy的存在浏览器兼容性问题，而且无法用polyfill磨平。