Vueの実例とライフサイクルを分析します。

最も簡単なVueの例

//html
<div id="app">
 {{message}}
</div>

//javascript
var vm = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

VueはMVMの思想を参考にしたので、ここの文字列は「ハローVue！」Modelに相当します。DOMはViewに相当します。Vueの例である「vm」はModeとViewを接続するためのView Modelです。ですから、データ駆動ビューを通して、どのように実現されるかに関心を持たなくてもいいです。
Vueの例に内蔵されている属性および方法は、すべて「$」で始まる。例えば、vm.data、vm.$lなど、他のオプションはインスタンスに等しくない。オプションはnew Vue（）構造関数によって導入されたパラメータオブジェクトであるが、インスタンスは、暴露されたインターフェースからいくつかのオプションの値にアクセスすることができる。
インスタンスのライフサイクル
インスタンスを作成する過程で、Vueはいくつかのライフサイクルフック関数を提供し、もう一つの特定の段階でいくつかの追加的な操作を実行することができます。
before Create:
例を初期化した後、データバインディングの前にこの関数を呼び出します。

//javascript
var vm = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 },
 beforeCreate: function() {
  console.log(this.message); //undefind
 }
})

ここでの「this」はVueのインスタンス、すなわち「vm」を指し、2、Vueのインスタンスは同時にオプションの「data」の下のすべての属性、つまりvm.message==vm.$data.message==「Hello Vue！」を代理しています。しかし、この段階のデータはVunインスタンス上にバインドされていないため、「undefind」が出力される。その前にデータをvm.$optionsに保存します。この段階でデータを取得するには、まずvm.$options.data()の方法で、「data」のオブジェクトに戻り、vm.$options.data().messageで対応する値を返します。
この段階では、データを必要としない仕事をしてもいいです。例えばグローバルリーダーシップ効果を起動します。
created:
インスタンスの作成が完了すると、データバインディングの後にこの関数が呼び出され、このときconsolie.logsは正しい値「Hello Vue！」を出力する。
この段階では、データはオプションのデフォルト値として初期化されていますが、実際のデータはajaxを通じてバックエンドデータベースから取得されますので、この段階はバックエンドにデータの取得を要求して、対応する属性にバインドされます。
その後、オプションの中に「el」属性がありますか？（Vueの例としてのマウントターゲットとして、ここでidはapのdivタグです。）がない場合、手動でvmを呼び出す必要があります。mountメソッドでマウント先を指定します。
続いて、「template」属性があるかどうかを判断します。ない場合は、直接に「el」属性で指定されたマウントターゲットを使用します。ある場合は、「template」属性で指定された文字列テンプレートでマウントターゲットを置換します。マウント先のすべての内容は無視されます。
before Mount:
インスタンスをマウントする前に呼び出します。
この段階ではグローバルリーダーシップ効果を除去できます。
mounted:
インスタンスのマウント後に呼び出します。
この段階ではページのロードが完了し、DOMを操作することができます。
beforeUpdate:
データ更新時に呼び出します。
この段階では、データ更新前に既存のDOMにアクセスすることができる。
udated：
データ更新後に呼び出します。
この段階では、更新後のDOMを操作することができます。