Vue是数据驱动视图模式，数据变更后，会自动更新视图。
原生js中要更新视图通常是通过触发事件，然后修改数据，最后获取dom节点并且把数据更新到dom节点。
在Vue的开发中我们只用修改数据就可以达到视图更新的效果，<b>这里Vue通过数据的监听帮助我们实现了视图的更新</b>，这是Vue中的响应式。
所以要实现响应式的原理（简单实现~）要解决两个问题：
1、监听数据的变化。
2、数据发生变化时更新视图。
本文先解决第一个问题：如何监听数据的变化。
这里要用到 ES5 中的 Object.defineProperty() 方法。查询 MDN 可以看到该方法的作用会直接在对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。其语法如下：
Object.defineProperty(obj, prop, descriptor)
其中参数 obj 是要定义的对象（目标对象），prop 是要定义或修改的属性名称（key），descriptor 是属性描述符。
说一句题外话。Vue这里用到了ES5的Object.defineProperty()方法，也说明Vue不兼容IE8及其以下的浏览器。
<b>这里重点是属性描述符，它是一个对象类型的数据，其包含很多属性，这里重点用到的是其 get 和 set 属性。</b>
MDN 中关于 get 和 set 的解释如下：
get：属性的getter函数，当访问该属性时，会调用此函数，函数不接受参数，函数的返回值会被用作属性的值。默认为 <b>undefined </b>
通俗讲的意思就是，当调用对象中某个属性时，会触发该属性上的get方法，并且该getter的返回值会当做时该属性的值。
set：属性的setter函数，当属性值被修改时，会调用该方法，此方法接受一个参数，这个参数就是该属性被赋予的新值。默认为 <b>undefined</b>
意思就是当给对象中某个属性赋值时，会触发该属性的set方法，并且将赋予的新值作为参数传递
好了，看到这里应该大概有想法怎么去实现监听数据的变化了。因为属性被赋予新值时会触发该属性上的set方法，所有主要就是去重写属性的set方法，在set方法中调用视图更新。
直接上代码
// 定义数据
var data = {
name: 'ABC',
age: 18,
friends: [1, 2, 3, 4],
skill: {
work: 15
}
}
// 视图更新
const renderView = () => {
console.log("******* 视图更新 *******", JSON.stringify(data));
}
// 数组类型的数据修改监听 -- 去修改其push\shift\pop等方法，在这些方法中实现视图的更新
const arrProto = Object.create(Array.prototype) // 备份数组原型，因为待会儿会修改数组数组其原型上的方法
const methodList = ['push', 'pop', 'shift']
methodList.forEach(method => {
arrProto[method] = function () {
console.log("method: ", method);
Array.prototype[method].call(this, ...arguments) // 例用Array原型原本的方法实现数据逻辑
renderView() // 实现视图的更新
}
})
// 实现监听到数据变化的处理方法
const reactive = (obj, key, value) => {
observer(value) // 迭代，监听对象数据
Object.defineProperty(obj, key, {
get() {
return value
},
set(newVal) {
value = newVal
console.log("***********key: ", key)
renderView()
}
})
}
// 数据监听方法
const observer = (target) => {
if (typeof target !== 'object' || target == 'null') {
return target
}
// 数组处理
if (Array.isArray(target)) {
target.__proto__ = arrProto // 修改目标数组的原型指向
} else {
// 普通对象处理
for (var key in target) {
reactive(target, key, target[key])
}
}
}
observer(data)
// 手动修改数据，查看控制台打印
// data.age = 20
// data.skill.work = 20
data.friends.push(1)
// data.friends.unshift(1) // unshift 没有写在methodList中，所以执行这句代码不会触发视图改变
需要说的是，列表类型的数据需要将将视图更新操作放到其原型上的方法中实现。总所周知，Vue 中数组数据是不会响应式更新数组下标赋值的，只有使用 push、pop 等数组方法才会更新视图。
arr[1] = "A" // 视图不更新
arr.push("A" ) // 视图更新
所以对于列表类型的数据需要单独处理，具体操作是改变该数组的原型指向，重新实现其 push、pop 等方法，这些方法原本逻辑的实现依靠 JS 中数组原型 Array.prototype 中对应的方法实现，然后再添加视图更新操作即可。具体就是上面代码中的这个部分：
// 数组类型的数据修改监听 -- 去修改其push\shift\pop等方法，在这些方法中实现视图的更新
const arrProto = Object.create(Array.prototype) // 备份数组原型，因为待会儿会修改数组数组其原型上的方法
const methodList = ['push', 'pop', 'shift']
methodList.forEach(method => {
arrProto[method] = function () {
console.log("method: ", method);
Array.prototype[method].call(this, ...arguments) // 例用Array原型原本的方法实现数据逻辑
renderView() // 实现视图的更新
}
})
注意，这里只在 methodList 中添加了 push、pop、shift 方法，所以上面代码也只能实现上面三个方法的响应式监听，正常的应该把所有的方法都写在 methodList 里。
