为什么 Vue2 this 能够直接获取到 data 和 methods，源码揭秘

1. 如何学习调试 vue2 源码2. data 中的数据为什么可以用 this 直接获取到3. methods 中的方法为什么可以用 this 直接获取到4. 学习源码中优秀代码和思想，投入到自己的项目中

const vm = new Vue({    data: {        name: '我是若川',    },    methods: {        sayName(){            console.log(this.name);        }    },});console.log(vm.name); // 我是若川console.log(vm.sayName()); // 我是若川

function Person(options){
}
const p = new Person({    data: {        name: '若川'    },    methods: {        sayName(){            console.log(this.name);        }    }});
console.log(p.name);// undefinedconsole.log(p.sayName());// Uncaught TypeError: p.sayName is not a function

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script><script>    const vm = new Vue({        data: {            name: '我是若川',        },        methods: {            sayName(){                console.log(this.name);            }        },    });    console.log(vm.name);    console.log(vm.sayName());</script>

npm i -g http-servercd exampleshttp-server .// 如果碰到端口被占用，也可以指定端口http-server -p 8081 .

function Vue (options) {    if (!(this instanceof Vue)    ) {        warn('Vue is a constructor and should be called with the `new` keyword');    }    this._init(options);}// 初始化initMixin(Vue);stateMixin(Vue);eventsMixin(Vue);lifecycleMixin(Vue);renderMixin(Vue);

jQuery = function( selector, context ) {  // 返回new之后的对象  return new jQuery.fn.init( selector, context );};

// 代码有删减function initMixin (Vue) {    Vue.prototype._init = function (options) {      var vm = this;      // a uid      vm._uid = uid$3++;
      // a flag to avoid this being observed      vm._isVue = true;      // merge options      if (options && options._isComponent) {        // optimize internal component instantiation        // since dynamic options merging is pretty slow, and none of the        // internal component options needs special treatment.        initInternalComponent(vm, options);      } else {        vm.$options = mergeOptions(          resolveConstructorOptions(vm.constructor),          options || {},          vm        );      }
      // expose real self      vm._self = vm;      initLifecycle(vm);      initEvents(vm);      initRender(vm);      callHook(vm, 'beforeCreate');      initInjections(vm); // resolve injections before data/props      //  初始化状态      initState(vm);      initProvide(vm); // resolve provide after data/props      callHook(vm, 'created');    };}

初始化 props初始化 methods监测数据初始化 computed初始化 watch

function initState (vm) {    vm._watchers = [];    var opts = vm.$options;    if (opts.props) { initProps(vm, opts.props); }    // 有传入 methods，初始化方法    if (opts.methods) { initMethods(vm, opts.methods); }    // 有传入 data，初始化 data    if (opts.data) {      initData(vm);    } else {      observe(vm._data = {}, true /* asRootData */);    }    if (opts.computed) { initComputed(vm, opts.computed); }    if (opts.watch && opts.watch !== nativeWatch) {      initWatch(vm, opts.watch);    }}

function initMethods (vm, methods) {    var props = vm.$options.props;    for (var key in methods) {      {        if (typeof methods[key] !== 'function') {          warn(            "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +            "Did you reference the function correctly?",            vm          );        }        if (props && hasOwn(props, key)) {          warn(            ("Method \"" + key + "\" has already been defined as a prop."),            vm          );        }        if ((key in vm) && isReserved(key)) {          warn(            "Method \"" + key + "\" conflicts with an existing Vue instance method. " +            "Avoid defining component methods that start with _ or $."          );        }      }      vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);    }}

判断 methods 中的每一项是不是函数，如果不是警告。判断 methods 中的每一项是不是和 props 冲突了，如果是，警告。判断 methods 中的每一项是不是已经在 new Vue实例 vm 上存在，而且是方法名是保留的 _ $ （在JS中一般指内部变量标识）开头，如果是警告。

function polyfillBind (fn, ctx) {    function boundFn (a) {      var l = arguments.length;      return l        ? l > 1          ? fn.apply(ctx, arguments)          : fn.call(ctx, a)        : fn.call(ctx)    }
    boundFn._length = fn.length;    return boundFn}
function nativeBind (fn, ctx) {  return fn.bind(ctx)}
var bind = Function.prototype.bind  ? nativeBind  : polyfillBind;

先给 _data 赋值，以备后用。最终获取到的 data 不是对象给出警告。遍历 data ，其中每一项：如果和 methods 冲突了，报警告。如果和 props 冲突了，报警告。不是内部私有的保留属性，做一层代理，代理到 _data 上。最后监测 data，使之成为响应式的数据。

function initData (vm) {    var data = vm.$options.data;    data = vm._data = typeof data === 'function'      ? getData(data, vm)      : data || {};    if (!isPlainObject(data)) {      data = {};      warn(        'data functions should return an object:\n' +        'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',        vm      );    }    // proxy data on instance    var keys = Object.keys(data);    var props = vm.$options.props;    var methods = vm.$options.methods;    var i = keys.length;    while (i--) {      var key = keys[i];      {        if (methods && hasOwn(methods, key)) {          warn(            ("Method \"" + key + "\" has already been defined as a data property."),            vm          );        }      }      if (props && hasOwn(props, key)) {        warn(          "The data property \"" + key + "\" is already declared as a prop. " +          "Use prop default value instead.",          vm        );      } else if (!isReserved(key)) {        proxy(vm, "_data", key);      }    }    // observe data    observe(data, true /* asRootData */);}

function getData (data, vm) {    // #7573 disable dep collection when invoking data getters    pushTarget();    try {      return data.call(vm, vm)    } catch (e) {      handleError(e, vm, "data()");      return {}    } finally {      popTarget();    }}

/**   * Perform no operation.   * Stubbing args to make Flow happy without leaving useless transpiled code   * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).   */function noop (a, b, c) {}var sharedPropertyDefinition = {    enumerable: true,    configurable: true,    get: noop,    set: noop};
function proxy (target, sourceKey, key) {    sharedPropertyDefinition.get = function proxyGetter () {      return this[sourceKey][key]    };    sharedPropertyDefinition.set = function proxySetter (val) {      this[sourceKey][key] = val;    };    Object.defineProperty(target, key, sharedPropertyDefinition);}

value——当试图获取属性时所返回的值。writable——该属性是否可写。enumerable——该属性在for in循环中是否会被枚举。configurable——该属性是否可被删除。set()——该属性的更新操作所调用的函数。get()——获取属性值时所调用的函数。

/**   * Check whether an object has the property.   */var hasOwnProperty = Object.prototype.hasOwnProperty;function hasOwn (obj, key) {  return hasOwnProperty.call(obj, key)}
hasOwn({ a: undefined }, 'a') // truehasOwn({}, 'a') // falsehasOwn({}, 'hasOwnProperty') // falsehasOwn({}, 'toString') // false// 是自己的本身拥有的属性，不是通过原型链向上查找的。

/**   * Check if a string starts with $ or _   */function isReserved (str) {  var c = (str + '').charCodeAt(0);  return c === 0x24 || c === 0x5F}isReserved('_data'); // trueisReserved('$options'); // trueisReserved('data'); // falseisReserved('options'); // false

function noop (a, b, c) {}var sharedPropertyDefinition = {    enumerable: true,    configurable: true,    get: noop,    set: noop};function proxy (target, sourceKey, key) {    sharedPropertyDefinition.get = function proxyGetter () {      return this[sourceKey][key]    };    sharedPropertyDefinition.set = function proxySetter (val) {      this[sourceKey][key] = val;    };    Object.defineProperty(target, key, sharedPropertyDefinition);}function initData(vm){  const data = vm._data = vm.$options.data;  const keys = Object.keys(data);  var i = keys.length;  while (i--) {    var key = keys[i];    proxy(vm, '_data', key);  }}function initMethods(vm, methods){  for (var key in methods) {    vm[key] = typeof methods[key] !== 'function' ? noop : methods[key].bind(vm);  }}
function Person(options){  let vm = this;  vm.$options = options;  var opts = vm.$options;  if(opts.data){    initData(vm);  }  if(opts.methods){    initMethods(vm, opts.methods)  }}
const p = new Person({    data: {        name: '若川'    },    methods: {        sayName(){            console.log(this.name);        }    }});
console.log(p.name);// 未实现前： undefined// '若川'console.log(p.sayName());// 未实现前：Uncaught TypeError: p.sayName is not a function// '若川'

构造函数this 指向call、bind、applyObject.defineProperty等等基础知识。