ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

定数vm = 新しいVue({
    データ： {
        名前: 「私は若川です」
    },
    メソッド: {
        言う名前(){
            コンソールにログ出力します。
        }
    },
});
console.log(vm.name); // 私は Ruochuan ですconsole.log(vm.sayName()); // 私は Ruochuan です

関数Person(オプション){

}

const p = 新しいPerson({
    データ： {
        名前: '若川'
    },
    メソッド: {
        言う名前(){
            コンソールにログ出力します。
        }
    }
});

コンソールにログ出力します。
// 未定義
コンソールにログ出力します。
// キャッチされない TypeError: p.sayName は関数ではありません

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<スクリプト>
    定数vm = 新しいVue({
        データ： {
            名前: 「私は若川です」
        },
        メソッド: {
            言う名前(){
                コンソールにログ出力します。
            }
        },
    });
    console.log(仮想マシン名);
    コンソールにログ出力します。
</スクリプト>

npm i -g http-server
CDの例
http サーバー。
// ポートが使用中の場合は、ポート http-server -p 8081 を指定することもできます。

関数 Vue (オプション) {
    if (!(このインスタンス Vue)
    ）{
        warn('Vue はコンストラクターなので、`new` キーワードで呼び出す必要があります');
    }
    this._init(オプション);
}
// 初期化 initMixin(Vue);
Vue.js のインスタンスを Vue.js にインポートします。
イベントミックスイン(Vue);
ライフサイクルミックスイン(Vue);
レンダリングミックスイン(Vue);

jQuery = function(セレクター、コンテキスト) {
  // 新しいオブジェクトを返します return new jQuery.fn.init( selector, context );
};

// コードは削除されました function initMixin (Vue) {
    Vue.prototype._init = 関数 (オプション) {
      var vm = this;
      // uid
      vm._uid = uid$3++;

      // これを回避するためのフラグ
      vm._isVue = true;
      // マージオプション
      if (オプション && options._isComponent) {
        // 内部コンポーネントのインスタンス化を最適化
        // 動的オプションのマージは非常に遅く、
        // 内部コンポーネント オプションには特別な処理が必要です。
        initInternalComponent(vm、オプション);
      } それ以外 {
        vm.$options = mergeOptions(
          コンストラクタオプションを解決します(vm.constructor)、
          オプション || {},
          仮想
        );
      }

      // 本当の自分をさらけ出す
      vm._self を vm に追加します。
      ライフサイクルを初期化します(vm);
      イベントを初期化します(vm);
      initRender(vm);
      フックを呼び出します(vm、'beforeCreate')。
      initInjections(vm); // データ/プロパティの前にインジェクションを解決する
      // 初期化状態 initState(vm);
      initProvide(vm); // data/props の後に provide を解決する
      callHook(vm, 'created');
    };
}

関数 initState (vm) {
    vm._watchers = [];
    var opts = vm.$options;
    opts.props の場合、 initProps(vm, opts.props); }
    // 渡されるメソッド、初期化メソッド if (opts.methods) { initMethods(vm, opts.methods); }
    // データを入力し、データを初期化する
    if (opts.data) {
      initData(vm);
    } それ以外 {
      観察(vm._data = {}, true /* asRootData */);
    }
    opts.computed の場合、 initComputed(vm, opts.computed); }
    opts.watch の場合、opts.watch は nativeWatch と等しくなります。
      initWatch(vm, opts.watch);
    }
}

関数 initMethods (vm, メソッド) {
    var props = vm.$options.props;
    for (var key in メソッド) {
      {
        if (typeof methods[key] !== 'function') {
          警告(
            "メソッド \"" + key + "\" は、コンポーネント定義で型 \"" + (typeof methods[key]) + "\" を持ちます。" +
            「関数を正しく参照しましたか？」
            仮想
          );
        }
        もしprops && hasOwn(props, key) であれば
          警告(
            (「メソッド \"" + キー + "\" はすでにプロパティとして定義されています。」)
            仮想
          );
        }
        if ((キーがVM内にある) && isReserved(キー)) {
          警告(
            「メソッド \"" + キー + "\" は既存の Vue インスタンス メソッドと競合します。" +
            「_ または $ で始まるコンポーネント メソッドの定義は避けてください。」
          );
        }
      }
      vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
    }
}

関数 polyfillBind (fn, ctx) {
    関数boundFn(a){
      var l = 引数の長さ;
      戻るl
        ? l > 1
          ? fn.apply(ctx, 引数)
          : fn.call(ctx, a)
        : fn.call(ctx)
    }

    境界Fn._length = fn.length;
    戻り値boundFn
}

関数nativeBind(fn, ctx) {
  fn.bind(ctx) を返す
}

var bind = Function.prototype.bind
  ? ネイティブバインド
  :ポリフィルバインド;

関数 initData (vm) {
    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(データ、vm)
      : データ || {};
    if (!isPlainObject(データ)) {
      データ = {};
      警告(
        'データ関数はオブジェクトを返す必要があります:\n' +
        'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
        仮想
      );
    }
    // インスタンス上のプロキシデータ
    var keys = Object.keys(データ);
    var props = vm.$options.props;
    var メソッド = vm.$options.methods;
    var i = キーの長さ;
    (i--) {
      var キー = keys[i];
      {
        if (メソッド && hasOwn(メソッド、キー)) {
          警告(
            (「メソッド \"" + キー + "\" はすでにデータ プロパティとして定義されています。」)
            仮想
          );
        }
      }
      もしprops && hasOwn(props, key) であれば
        警告(
          「データ プロパティ \"" + キー + "\" はすでにプロパティとして宣言されています。」 +
          "代わりにプロパティのデフォルト値を使用してください。",
          仮想
        );
      } そうでなければ (!isReserved(key)) {
        プロキシ(vm、"_data"、キー);
      }
    }
    // データを観察する
    観察(データ、true /* asRootData */);
}

関数 getData (データ, vm) {
    // #7573 データゲッターを呼び出すときに依存関係コレクションを無効にする
    プッシュターゲット();
    試す {
      データを返します。call(vm, vm)
    } キャッチ (e) {
      handleError(e, vm, "データ()");
      戻る {}
    ついに
      ポップターゲット();
    }
}

/**
   * 何も操作しません。
   * 無駄なトランスパイルコードを残さずに Flow を満足させるための引数のスタブ化
   * ...rest を使用 (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/)。
   */
関数 noop (a, b, c) {}
var 共有プロパティ定義 = {
    列挙可能: true、
    設定可能: true、
    取得: いいえ、
    設定: なし
};

関数プロキシ（ターゲット、ソースキー、キー）{
    sharedPropertyDefinition.get = 関数 proxyGetter() {
      this[sourceKey][key]を返す
    };
    sharedPropertyDefinition.set = 関数 proxySetter (val) {
      this[ソースキー][キー] = val;
    };
    Object.defineProperty(ターゲット、キー、共有プロパティ定義);
}

デバッグ モードで、Alt キーを押しながらマウスをメソッド名の上に移動すると、関数が定義されている場所を確認できます。クリックするとジャンプします。
/**
   * オブジェクトにプロパティがあるかどうかを確認します。
   */
var hasOwnProperty = Object.prototype.hasOwnProperty;
関数hasOwn(obj,キー){
  hasOwnProperty.call(obj, key) を返します。
}

hasOwn({ a: undefined }, 'a') // 真
hasOwn({}, 'a') // 偽
hasOwn({}, 'hasOwnProperty') // 偽
hasOwn({}, 'toString') // 偽
// これはプロパティ自体のプロパティであり、プロトタイプ チェーンを通じて上方向に検索されるものではありません。

/**
   * 文字列が $ または _ で始まっているかどうかを確認します
   */
関数isReserved(str) {
  var c = (str + '').charCodeAt(0);
  c === 0x24 || c === 0x5F を返す
}
isReserved('_data'); // 真
isReserved('$options'); // 真
isReserved('data'); // 偽
isReserved('options'); // false

関数 noop (a, b, c) {}
var 共有プロパティ定義 = {
    列挙可能: true、
    設定可能: true、
    取得: いいえ、
    設定: なし
};
関数プロキシ（ターゲット、ソースキー、キー）{
    sharedPropertyDefinition.get = 関数 proxyGetter() {
      this[sourceKey][key]を返す
    };
    sharedPropertyDefinition.set = 関数 proxySetter (val) {
      this[ソースキー][キー] = val;
    };
    Object.defineProperty(ターゲット、キー、共有プロパティ定義);
}
関数 initData(vm){
  定数データ = vm._data = vm.$options.data;
  const keys = Object.keys(データ);
  var i = キーの長さ;
  (i--) {
    var キー = keys[i];
    プロキシ(vm、'_data'、キー);
  }
}
関数 initMethods(vm, methods){
  for (var key in メソッド) {
    vm[key] = typeof methods[key] !== 'function' ? noop : methods[key].bind(vm);
  } 
}

関数Person(オプション){
  vm = this とします。
  vm.$options = オプション;
  var opts = vm.$options;
  if(opts.data){
    initData(vm);
  }
  if(opts.methods){
    initMethods(vm, opts.methods)
  }
}

const p = 新しいPerson({
    データ： {
        名前: '若川'
    },
    メソッド: {
        言う名前(){
            コンソールにログ出力します。
        }
    }
});

コンソールにログ出力します。
// 実装前: 未定義
// '若川'
コンソールにログ出力します。
// 実装前: キャッチされない TypeError: p.sayName は関数ではありません
// '若川'