数据劫持

for in 会遍历 原型上的属性
Object.keys 不会遍历

Object.defineProperty的缺点。
缺点 : vm.list = [1, 2, 3, 4];

1. 通过数组索引值改变数组
   1. vm.list[0] = 2; 通过数组索引来改变值得时候是不会发生变化的。
2. 对数组长度放生变化
   1. vm.list = [1, 2, 3, 4]; 截取list的长度。不会检测到变化。

将option中的data 定义到 Vue 实例上

// 通过IIFE立即执行函数来实现模块化。
var Vue = (function (){
  // 定义一个构造函数。
    var Vue = function (opt){
     var vm = this;
     this._data = typeof opt.data === 'function'
       ? opt.data.call(this)
       : typeof opt.data === "Object" && data !==null
       ? opt.data
       : {};
     reactiveData(vm._data, vm);
     proxyData(vm,'_data', vm);
  }
  // 响应式数据。
  function reactiveData(data,vm){
      var keys = Object.keys(data),
        item;
    for(var i = 0; i< keys.length; i++){
       item = keys[i];
       (function(k){
         var value = data[k];
         Object.defineProperty(data,k,{
            get(){
                return value
            },
            set(newVal){
              if(newVal === value) return;
                value = newVal
            }
         })
       })(item)
    }
  }
  // 将数据代理到实例上
  function proxyData(vm,src,data){
      var keys = Object.keys(data),
        item;
    for(var k = 0; k < keys.length; k ++){
            item = keys[k];
        (function(k){
            Object.defineProperty(vm,k,{
              get(){
                return vm[src][k]
            },
            set(newValue){
                vm[src][k] = newValue
            }
          })
        })(item)
    }
  }
  return Vue
})()