了解下数据属性和访问器属性的特性

通常我们会这样定义一个普通对象，

var obj = {
    foo:"bar"
}
console.log(obj.foo);//输出'bar'

我们可以修改这个对象的属性，

obj.foo = "baz";
console.log(obj.foo);//输出'baz'

但是，一旦Object.freeze(obj)了，就无法修改对象的属性了。

    var obj = {
        foo:"bar"
    }
    console.log(obj.foo);//输出'bar'
    Object.freeze(obj);
     
    obj.foo = "baz";
    console.log(obj.foo);//输出'bar'

为啥？Object.freeze()有什么神奇魔力？
这个得从数据属性的几个特性说起了。
var obj = {foo:"bar"}，foo属性就是obj的数据属性。
在控制台试试Object.getOwnPropertyDescriptors(obj)或者Object.getOwnPropertyDescriptor(obj,'foo')。

configurable，enumerable，value和writable就是foo这个属性的特性。
value：属性值，比如obj.foo的属性值就是bar;
writable：是否可改写。我们不妨试试把writable改成false。

var obj = {
    foo:"bar"
}
Object.defineProperty(obj,"foo",{
	writable:false
});
obj.foo = "world";
console.log(obj.foo);//输出"bar"

writable置为false后，就无法改写obj.foo了。

enumerable：是否可枚举。在使用Object.keys()和Object.getOwnPropertyNames()时，能够感受更明显一些。

var obj = {
    foo:"bar"
}
Object.defineProperty(obj,"foo",{
	enumerable:false
});
let res = Object.keys(obj);//返回实例的所有可枚举属性
let res2 = Object.getOwnPropertyNames(obj);//返回实例的所有属性，不论是否可枚举
console.log(res,res2);//输出[]  ['foo']

configurable：是否可配置。configurable置为false，delete obj.foo无效，即无法删除obj上的foo属性。且一旦configurable为false了，就无法重新将其设置为true，即不可逆。
看看下面的例子就明白了。

var obj = {
    foo:"bar"
}
Object.defineProperty(obj,"foo",{
	configurable:false
});

delete obj.foo;
console.log(obj.foo)//输出'bar'

Object.defineProperty(obj,"foo",{
    configurable:true
});//报错， Cannot redefine property: foo

好了，现在来对比下obj在Object.freeze()前后，这四个特性有啥变化。

var obj = {
    foo:"bar"
}
//{value: "bar", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj,'foo'));

Object.freeze(obj);
//{value: "bar", writable: false, enumerable: true, configurable: false}
console.log(Object.getOwnPropertyDescriptor(obj,'foo'));

可以看出，Object.freeze()同时改变了foo的configurable和writable，将它们都置为false了，这也是之后无法改变obj属性的原因。

以上简单介绍了数据属性的几个特性，顺带也了解下访问器属性的特性吧。
差不多，configurable，enumerable，value ，writable ，换成get和set。
先来个简单的例子吧。

var obj = {
    _foo:"bar",
    get foo(){
        return this._foo;
    },
    set foo(val){
        this._foo = val;
    }
}
console.log(Object.getOwnPropertyDescriptors(obj));
console.log(obj.foo);//输出'bar'

obj.foo = "baz";
console.log(obj.foo);//输出'baz'

注意哈：这里一个是foo，另一个是_foo（前缀下划线）。其中，foo是访问器属性，_foo是数据属性。
如果两个都是foo，访问或修改obj.foo时都会进入死循环，最后堆栈溢出。

//如果都是foo
var obj = {
    foo:"bar",
    get foo(){
        return this.foo;
    },
    set foo(val){
        this.foo = val;
    }
}
console.log(obj.foo);//会死循环，导致堆栈溢出

除了get foo(){}和set foo(){}，还有几种定义访问器属性的方法，这里简单罗列一下吧。

Object.defineProperty()

var obj = {
    _foo:"bar"
};
Object.defineProperty(obj,"foo",{
    configurable:true,
    enumerable:true,
    get:function(){
        return this._foo;
    },
    set:function(val){
        this._foo = val;
    }
});
console.log(obj.foo);//输出'bar'

obj.foo = "baz";
console.log(obj.foo);//输出'baz'

Object.defineProperties()

var obj = {
    _foo:"bar"
}
Object.defineProperties(obj,{
    "foo":{
        configurable:true,
        enumerable:true,
        get:function(){
            return this._foo;
        },
        set:function(val){
            this._foo = val;
        }
    }
});
console.log(obj.foo);//输出'bar'

obj.foo = "baz";
console.log(obj.foo);//输出'baz'

obj.__defineGetter__和obj.__defineSetter__

var obj = {
    _foo:"bar"
}
obj.__defineSetter__("foo",function(val){
    this._foo = val;
});
obj.__defineGetter__("foo",function(){
    return this._foo;
});
console.log(obj.foo);//输出'bar'

obj.foo = "baz";
console.log(obj.foo);//输出'baz'

综上，定义对象有以下三种方式，

• 直接使用对象字面量

var obj = {
    foo:"bar"
}

• 使用defineProperty定义数据属性的方式

Object.defineProperty(obj,"foo",{
    configurable:true,
    enumerable:true,
    writable:true,
    value:"bar"
});

• 使用defineProperty定义访问器属性的方式

var obj = {
    _foo:"bar"
}
Object.defineProperty(obj,"foo",{
    configurable:true,
    enumerable:true,
    get:function(){
        console.log("get foo");
        return this._foo;
    },
    set:function(newVal){
        console.log("set foo");
        this._foo = newVal;
    }
})

对比以上三种方式，第三种方式，让数据变得可观测了。
当访问obj.foo时，触发了get，并输出了"get foo"；
当修改obj.foo时，触发了set，并输出了"set foo"。

也就说，数据什么时候被访问了，get感知得到；数据什么时候被修改了，set感知得到。数据是时刻被观测着的。
这就是vue实现响应式数据的基本原理。