实现一个简单版本的vue及源码解析

Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

Let data to observable

首先假定一种最简单的情况，不去考虑其他情况。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set，对订阅者进行回调（在这里是render）。

function observe(value, cb) {
 Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}
function defineReactive (obj, key, val, cb) {
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: ()=>{
 /*....依赖收集等....*/
 /*Github:https://github.com/answershuto*/
 return val
 },
 set:newVal=> {
 val = newVal;
 cb();/*订阅者收到消息的回调*/
 }
 })
}

为了操作方便，我们需要将 _data 上的数据代理到vm实例上.

function proxy (data) {
 const that = this;
 Object.keys(data).forEach(key => {
 Object.defin