1. 概述：

data 是 Vue options API 中用来声明数据的语法展现形式，具体步骤如下：

1. Vue 在实例化的过程中, 返回数据对象

export default {
  data() {
    return {
      // ... 数据声明
    };
  }
};

• 通过响应式包装存储在$data中, 并且vm实例可以越过$data访问属性 (代理模式 + 观察者模式)
• 直接在vm/vm.$data上面声明的数据不是响应式数据 (无法直接在模板上面渲染)
• 不推荐直接挂载如果真的需要此法使用 $set方法

注意

• 在vm的属性/方法中: 以$, _, __开头的属性/方法一般是Vue提供的一些内置的API
• 开发者需要尽量避免以$, _, __开头的方式进行命名 (程序可能会出现异常)

2. data为什么必须是一个函数 ?

• 避免多个 vm (vm1, vm2)代理(劫持)相同的引用
• 函数保证了每次创建的实例都是最新的实例
• 防止应用重复，使用对象的深克隆也是可以的 (e.g _.cloneDeep)

3. 使用 Object.defineProperty 简单实现 data

var Vue = (function () {

  function Vue(opts) {
    this.$options = opts;

    this.init(this, opts);
  }

  Vue.prototype.init(vm, options) {
    var $data = options.data();
    vm.$data = $data;

    this.initData(vm);
  }

  function initData(vm) {
    var $data = vm.data();

    for (var k in $data) {
      ;(function (k) {
        Object.defineProperty(vm, k, {
          get: function () {
            return vm.$data[k];
          }
          set: function (newVal) {
            vm.$data[k] = newVal;

            return true;
          }
        });
        
      })(k);
    }
  }
  
})();