前言
Vue最明显的特性之一便是它的响应式系统，其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时，视图便会进行响应操作。文章简要阐述下其实现原理，如有错误，还请不吝指正。下面话不多说了，来随着小编来一起学习学习吧。
响应式data
<div id = "exp">{{ message }}</div>
const vm = new Vue({
el: '#exp',
data: {
message: 'This is A'
}
})
vm.message = 'This is B' // 响应式
vm._message = 'This is C' // 非响应式
上述代码中，data是Vue实例的数据对象，当实例初始化时，Vue 会遍历 data 中的所有属性，并且使用 Object.definePropery 把这些属性全都转为 getter/setter ，从而让 data 的属性能够响应数据变化。另外，Object.defineProperty 是 ES5 中一个无法 shim(垫片) 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。对象必须是纯粹的对象 (含有零个或多个的 key/value 键值对)：浏览器 API 创建的原生对象。所以，在data中声明过的message是响应式数据，而由于_message是在data外使用 Vue 实例增加的数据，所以亦不属于响应式。
关于Object.definePropery
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。这个API是实现响应式数据的关键所在。
Syntax: Object.defineProperty(obj, prop, descriptor)
- obj: 要定义属性的对象
- prop: 要定义或修改的属性的名称
- descriptor: 将被定义或修改的属性描述符。
Tips： 要知道ECMAScript中有两种属性：数据属性和访问器属性。这里的descriptor可取值有数据属性和访问器属性。
数据属性： 包含一个数据值的位置，在此位置可以进行读写操作，有以下特性：
- [[Configurable]]：对属性的操作可配置性开关，如删除，修改。默认值为true。
- [[Enumberble]]：是否可枚举（通过for-in）。默认值为true。
- [[Writable]]：能否修改属性的值。默认值为true。
- [[value]]：包含这个属性的数据值，读取时从该位置读，写入时把新值存到该位置。默认值为undefined。
访问器属性： 不包含数据值，包含一个函数对（getter/setter）。特性如下：
- [[Configurable]]：对属性的操作可配置性开关，如删除，修改。默认值为true。
- [[Enumberble]]：是否可枚举（通过for-in）。默认值为true。
- [[Get]]：读取属性时调用的函数。默认值为undefined。