Vue源码解析（一）data属性映射和methods函数引用的重定义

使用Vue框架进行开发时，我们在option的data和methods中定义属性和方法，在调用时直接使用 vm.attr 或 vm.func()的形式，而不是用vm.data.attr或vm.methods.func()的方式。

项目的git地址： https://github.com/xubaodian/SimuVue.git ，后续会持续更新，分析Vue的源码，争取实现一个乞丐版的Vue。
Vue解析系列文章如下：

Vue源码解析（二）Vue的双向绑定讲解及实现

我们传入Vue的options对象一般为以下这种形式，

{
   
  data: {
   
    name: 'xxx'
  },
  mounted() {
   
    //调用方法,没有使用this.methods.getInfo();
    this.getInfo();
  },
  methods: {
   
    getInfo() {
   
      //获取属性,没有使用this.data.name
      this.name = 'xxxx2314';
      //操作等等....
    }
  },
  computed: {
   
    getName() {
   
      return this.name;
    }
  },
  watch: {
   
    'name'(val, oldVal) {
   
      //这是操作
    }
  }
}

在vue实例中，我们无论data还是method，都直接调用，这是因为一下vue初始化时做了下面两点操作：

1、给data中的属性做了代理，所有访问和设置vm[key]时,最终操作的是vm._data[key],而Vue在初始化时，会vm._data其实是options中data的引用。

2、methods中的所有方法都直接在vue实例重新定义了引用。

看下我的实现代码，是对Vue源码的精简，如下：

//vue构造函数
class Vue {
   
  constructor(options) {
   
    //$options存储构造选项
    this.$options = options || {
   };
    //data保存构造设置中的data，暂时忽略data为函数的情况
    let data = options.data;
    this._data = data;
    //初始化
    this._init();
  }

  _init() {
   
    //映射key
    mapKeys(this);
    //在vue实例上重新定义方法的引用
    initMethods(this, this.$options.methods)
  }
}


//重新定义方法的引用,注意修改调用函数时的上下文环境，这里用bind，当然也可以用apply和call
function initMethods (vm, methods