关于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 实现原理

Answer 2

这个在vue的官方文档里有说明呀，在data中的所有属性会转换为getter和setter，然后让vue实例来代理data的所有属性，这样是完成了一体化的响应式，所有的数据你都可以在实例中使用this访问到，或使用vm.$data.xxx访问到。

具体这些去看官方文档就好，vue的官方文档是据我所知所有的框架里边最友好的，我每次有疑惑就去翻一翻，几乎每个字都读过，可以解答关于vue的一切问题，相信官方吧

Answer 3

通过事件绑定来改变data

<button @click="disapear"></button>
// 点击按钮切换布尔值

new Vue是固定写法
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的

Answer 4

还有人吗...能用oop来解释一下吗

Answer 5

http://www.jianshu.com/p/07ba...