关于vue实例化属性的一些问题

Question

在开始学vue的现在，我在实例化vue之后，在全局变量通过app.bool来改变new VUE{(里面的属性值)}；十分想知道，在我们日常的实例化对象中，vue是通过何种模式来实现这种方式。有大神能否通过例子来说明。我自己也尝试着模仿vue这种方式来做，发现自己的知识有限

Answer 1

监听 data 变化的原理：

/**

  Observer是将输入的Plain Object进行处理,利用Object.defineProperty转化为getter与setter,

  从而在赋值与取值时进行拦截

  这是Vue响应式框架的基础

 */

function isObject(obj){

    return obj != null && typeof(obj) == 'object';

}

function isPlainObject(obj){

    return Object.prototype.toString(obj) == '[object Object]';

}

function observer(data){

    if(!isObject(data) || !isPlainObject(data)){

        return;

    }

    return new Observer(data);

}

var Observer = function(data){

    this.data = data;

    this.transform(data);

};

Observer.prototype.transform = function(data){

    for(var key in data){

        var value = data[key];

        Object.defineProperty(data,key,{

            enumerable:true,

            configurable:true,

            get:function(){

                console.log("intercept get:"+key);

                return value;

            },

            set:function(newVal){

                console.log("intercept set:"+key);

                if(newVal == value){

                    return;

                }

                data[key] = newVal;

            }

        });

        //递归处理

        this.transform(value);

    }

};

参考：理解 vue 实现原理