vue2数据绑定原理(面试题)

vue2的数据绑定是通过数据劫持和观察者模式实现的。(先感受到变化,再去渲染)

1、数据劫持：当把一个普通的 JavaScript 对象（json）传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

目的是：感知属性的变化。(当给属性赋值时，程序是能够感知到的)

感知到数据变化之后,我们再使用观察者模式去实现模板上数据的改变

2、观察者模式（发布订阅模式）： ​vue2框架会把模板使用该数据的所有dom元素做订阅。当数据发生变化时，然后，发布给所有的订阅者。

目的：当属性发生变化时，所有使用(直接使用和间接使用）该数据地方（订阅）跟着变化

 // let obj = {
        
    // }

    // Object.defineProperty("目标对象","增改的属性",{修饰符|get和set方法})

    // Object.defineProperty(obj,"name",{
    //     get:function(){
    //         console.log("get");
    //         return this._name;
    //     },
    //     set:function(v){
    //         this._name = v;
    //         console.log("set");
    //     }
    // });

    // 拦截,劫持,时间点
    // 写
    // obj.name = "嘿嘿";
    // console.log(obj.name);

    //------------------------------------
    //实现双向绑定

    let data = {

    }

    let oInput = document.querySelector("input");

    Object.defineProperty(data,"content",{
        get:function(){
            return oInput.value;
        },
        set:function(v){
            oInput.value = v;
        }
    });