Vueのソースコード解析（A）：新しいVueが（）何をしましたか

Vueのソースコード解析（A）：新しいヴュー（）何をしたか

著者：@TiffanysBear

新しいVueのを見る前に、我々は最初のVueのソースコードのいくつかの基本的な理解を何すでになどのソースディレクトリの設計基準の基本的な理解を持っている場合、あなたは次のセクションをスキップすることができました。

ソース・カタログのデザイン

srcディレクトリ内Vue.jsソース、ディレクトリ構造。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

コンパイラ

Vue.jsに関連するすべてのコードが含まれているディレクトリをコンパイルするコンパイラ。テンプレートは、解析ASTに構文木、最適化されたASTの構文木、コード生成機能を備えています。

建物を含有するVue.js.を備え、また、実行時に行うことができる;（VUEローダプラグインなどのWebPACK使用できる）を構築する際の作業の編集を行うことができます仕事のコンパイル消費性能があるので、前者がより推奨されます - オフラインコンパイル。

コア

Vue.jsコアディレクトリは組み込みコンポーネント、グローバルAPIパッケージ、Vueのは、インスタンス化、オブザーバー、仮想DOM、などの効用関数使用率などのコアコードが含まれています。

プラットフォーム

Vue.js MVVMフレームワークは、クロスプラットフォームである、それはウェブ上で実行することができ、それはまた、クライアントとネイティブweex上で実行することができます。Vue.js入り口プラットフォームは、二つの主要なディレクトリエントリは、それぞれがウェブ上やweex上で実行されているVue.js.に詰め、2を表し、

サーバ

2.0 Vue.jsサーバ側は、このディレクトリ内のすべての関連のロジックをレンダリングする、サーバー側のレンダリングをサポートしています。注意：このコードの一部は、Node.jsのの、サーバー側で実行され、混乱ブラウザのVue.jsでは実行されません。

主な仕事のレンダリングサーバーは、サーバー側のHTML文字列のコンポーネントをレンダリングするブラウザにそれらを直接送信することで、最終的に静的なマーク「ハイブリッド」アプリケーションは、クライアント上で完全にインタラクティブです。

SFC

通常、我々はVue.jsはWebPACKの構築を支援し、その後.vue単一のファイルでアセンブリを書くために開発しています。

コードのロジックは、簡単なJavaScriptオブジェクトに解決このディレクトリのファイルの内容を.vueます。

シェアード

Vue.jsは方法は、ツールは、メソッドがVue.js Vue.jsブラウザとサーバによって共有される、ここで定義されているいくつかのツールを定義します。

次は分析が設定package.jsonのパッケージ構成から、ウェブ環境下で行われ、それがウェブ環境で実行して見ることができる場所のために我々の分析は、次のプラットフォームに基づいて、Vueのインポート文書を見に来（Runtime only (CommonJS))ポータルファイルweb/entry-runtime.jsの下。

Vueのエントリファイル

Vueの入り口ファイルのディレクトリVUE / SRC /コア/インスタンス/ index.js

// vue/src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(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)

export default Vue

ES5は、クラスES6の利点の文言があるためである言葉遣いで使用される、とされていません。

1、プロトタイププロトタイプのVueを増加させる方法としては、入ってくる混合ミックスインヴュー方式を使用。この方法は、クラスを実装することは困難であり、
コードが大きすぎるファイル、保守管理の容易さではありませんように、達成するために複数のモジュールを横切って延びるように2、コードモジュール、このような合理的な分割を。このプログラミングのスキルは、後にコード開発の実現のために使用することができます。

ミックスインプロトタイピングにより増加しました。

// vue/src/core/instance/index.js
initMixin(Vue) // _init
stateMixin(Vue) // $set、$delete、$watch
eventsMixin(Vue) // $on、$once、$off、$emit
lifecycleMixin(Vue) // _update、$forceUpdate、$destroy、
renderMixin(Vue) // $nextTick、_render

initGlobalAPI

VUE / SRC /コア/ index.jsに、initGlobalAPI（ヴュ）呼び出しでは、Vueのための静的メソッドを増加させることです

/ディレクトリ/グローバル-APIのパスVUE / SRC /コアファイル内の静的メソッドは、Vueが追加されます

例えば：

Vue.use // 使用plugin
Vue.extend
Vue.mixin 
Vue.component 
Vue.directive 
Vue.filter

これらの基本的な理解やトラックを見つけるためのステップバイステップでは、ステップバイステップでは、我々は見つけるnew Vue場所を、と我々は見てnew Vue何をすべきかを最終的に？

新しいVueが何をしましたか

これは、新しいキーワード初期化、呼び出しによってファイルエントリからと思われます

// src/core/instance/index.js

this._init(options)

ミックスインは見試作から増加し、initMixin（ヴュー）は、プロトタイプの方法は、Vueのは_initを増加と呼ばれています

// src/core/instance/init.js

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    ....
    ....
    // 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')
    
    ....
    ....
    
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
}

だから、それは上記の機能からと思われる、新しいVUEのものは、それぞれ、打ち上げとしてフローチャートのように、行われ

連結設定
初期のライフサイクル
初期化イベントセンター
初期設定のレンダリング
コールbeforeCreateフック関数を
INIT注射および反応（この段階での結合特性が注入された、そしてた$watch反応性になったが、$elまだ発生していない、DOM生成されません）
初期化状態の状態（初期化データ、小道具、計算、ウォッチャ）
フック関数を作成したコール。

最終目標初期設定では、EL特性を検出した場合、その後、VMをマウントする$マウント方法。VMを呼び出すマウントテンプレートは、最終的なDOMにレンダリングされます。

Vueの初期化コードのメインライン論理は、非常に明確なロジックおよびフローは、プログラミングのこの方法は価値が学習することを非常に明確です。

遂に

今面での機能の唯一のラフ一部new Vueのプロセスと意味の、次の書類を学ぶために継続し、Vueのソースコード解析、後にコンクリート製のライフサイクルのライフサイクルのどのような各機能のより詳細な分析が続きます。