Vueインスタンスのライフサイクルを理解する

Question

Vueインスタンスのライフサイクルのさまざまな段階とステップについて、Vue.jsの公式ドキュメントを参照して、this diagramが見つかりました。私はVueの基本的な機能を理解していますが、図で述べた多くの段階の意味を理解できません。たとえば、「テンプレートをレンダリング関数にコンパイルする」または「仮想DOMを再レンダリングしてパッチする」などです。私は彼らが何を意味するか分かりません。

私はドキュメントの中で、今すぐすべてを理解する必要はないと知っていますが、いくつかのVue（またはフロントエンド）のエキスパートが簡単な言葉でこれらの手順を簡単に説明できることを望んでいました。

Answer 1

それはすべての小さな圧倒的なことができ、ここではそれらのものが

が機能

Vueのは、あなたのVueのインスタンスをコンパイルするとき、それはあなたのHTMLの純粋なJavaScriptの表現である、render functionを作成し、レンダリングされているものです。このような何か：

new Vue({ 
    template: `<div>{{msg}}</div>`, 
    data:{ 
    msg: 'Hello Vue 
    } 
}).$mount('#app') 

は、実際にこのようなものに変わります：

new Vue({ 
    render: function(createElement) { 
    return createElement('div', this.msg) 
    }, 
    data: { 
    msg: 'Hello Vue' 
    } 
}).$mount('#app') 

がここにJSFiddleです：https://jsfiddle.net/bvvbmpLo/

あなたがそれを処理する必要はありません、Vueのはあなたのためにそれを行い、ほとんどの場合、レンダリング機能を記述することはほとんどありません。しかし、Vueは純粋なJavaScriptでテンプレートを表現するためにシーンの背後にある作業を行っていることを理解することが重要です。

仮想DOM再レンダリングと

にパッチを当て、それはだから、あなたは本当にこのことについて知っている必要はありませんが、Vueが仮想DOMを使用して変更を追跡し、DOMの必要性のどの部分を決定する方が簡単です更新する。実際には

あなたが状態変化したときに、何が起こることはVueのは、DOM（vTreeと呼ばれる）を表し、ツリーを構築していることで、それは今のように、現在のvTree、前vTreeを比較diffingアルゴリズムと呼ばれるものを使用しています表示されている状態を反映するためにページのどの部分を変更する必要があるかを把握しようとします。新しい状態を表すためにページの小さな部分を変更することは、patchingと呼ばれています。

これは、仮想DOMのかなり高いレベルの概要です。これを効率的に機能させることは大変複雑なので、Vueのようなフレームワークが最初に存在しています。それについてもっと学びたいと思ったら、GithubのMatt-Esch/virtual-domを見てみてください。このコンセプトは、このコンセプトについて詳しく説明しています。