Vue.js响应式模拟实现

Vue.js MVVM 框架的三大要素：
1.响应式 2.模板引擎 3.渲染
本篇文章主要模拟实现一下Vue是怎么实现响应式的

1.先实现一个最简单的Vue实例

<div id="app">
    {{name}}
    {{age}}
div>

var vm = new Vue({
    el: '#app',
    data: {
        name: 'lalaBao',
        age: 18
    }
})

在这种情况下随便执行一段 vm.age = 3,视图显示也会即时变为3。
那么问题来了：
1.视图是怎么观察到data上数据的改变的呢？
2.数据定义在了data，为什么可以通过vm.key去访问和修改呢？

2.实现最核心的方法是Object.defineProperty(obj, key, {get:getFunc, set:setFunc})
ES5开始支持

var vm;//这里我们不去关注vm是怎么被实例化的
var key, data={
    name: 'lalaBao',
    age: 18
}
for(key in data){
//闭包为了为key创建独立作用域，也可以用let替代
    function(key){
        Object.defineProperty(vm, key, {
            get: function(){
                console.log('监听到get');
                return data[key];
            },
            set: function(newValue){
                console.log('监听到set');
                data[key] = data[key];
            }
        })
    }(key)
}

Object.defineProperty重写了变量的get、set方法，由静态值变为可以被监听到操作的。然后绑定为vm的属性，所以可以直接通过vm访问到~铛铛~