vue的最大特点之一就是数据驱动视图，什么是数据驱动视图，简单来说就是数据变化引起视图变化。
使得Object数据实现‘可观测’，Object构造函数提供了defineProperty方法使数据‘可观测’
该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for...in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。
let obj = {}; let val = ‘Object的变化侦测‘; Object.defineProperty(obj, ‘name‘,{ enumerable: true,//当且仅当该属性的enumerable为true时，该属性才会出现在对象枚举属性中 configurable: true,//当且仅当该属性的configurable为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上删除,通过delete obj.name可进行删除操作 // value: undefined,//该属性对应的值 // writable: true,//当且仅当该属性的writable为true时，该属性的值才能被赋值运算符进行改变 get: ()=> { // 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 console.log(‘obj对象的name属性被读取了‘); return val; }, set: (newVal)=> { // 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。 console.log(‘obj对象的name属性被修改了‘,newVal); val = newVal } }) console.log(obj.name);//此处触发get事件，打印 obj对象的name属性被读取了 Object的变化侦测 obj.name = ‘修改‘;//此处触发了set事件，打印 obj对象的name属性被修改了 修改
通过Object.defineProperty()方法给obj定义了一个name属性，并把这个属性的读和写分别使用get()和set()进行拦截，每当该属性进行读或写操作的时候就会触发get()和set()
原文：https://www.cnblogs.com/emilyzz/p/14754650.html