Vue 2フックレディー

Question

Vue 2、実際に「完成したレンダリング」を指すライフサイクルフックはありますか？私は、ページを入力するときに読み込み画面を置いて、Vueがすべての読み込みを完了した後に消えてページの内容を表示したいのですが、私はライフサイクルフックのほとんどを試しましたが動作しませんでした。

updated(){ 
    this.loaded() 
}, 
methods:{ 
    loaded(){ 
    var vm = this; 
    this.loading = false; 
    } 
} 

なライフサイクルフックがない場合、あなたは私が代わりに何をすべきかを示唆している：ここでupdatedは「レンダリング終了」を指している場合、私がやろうと何かがありますか？ありがとう

Answer 1

あなたが探している方法はおそらくmounted()です。これは、vueコンポーネントの準備ができたら起動します。あなたは、Vueのライフサイクルのマニュアルを確認することができますhere

ので、おそらくこのようなものになり、あなたのVueのインスタンス：私は、特定のライフサイクルフックまたは他のヴュー指定の方法にあることを見つけることができないとして

var app = new Vue({ 
    el: '#app', 

    /* 
    * When the instance is loaded up 
    */ 
    mounted: function() { 
    this.loaded() 
    } 

    methods: { 
    loaded: function() { 
     var vm = this 
     this.loading = false 
    } 
    } 
}) 

Answer 2

を私は、次のように基本的なJSコードなどのコードを持つすべてのものをロードするために必要な時間の推定を使用し、すべてがレンダリングを終了した時点をフック：

mounted(){ 
    this.loaded() 
}, 
methods:{ 
    loaded(){ 
    var vm = this; 
    setTimeout(function(){ 
     vm.loading = false 
    }, 3000); 
    } 
} 

希望があるだろうヴューに強いです誰かより正確にフックする新しい答えを提供します。

Answer 3

、すべての子コンポーネントにもマウントされていることを確認してくださいvm.$nextTickを使用するには - のsetTimeoutよりもずっときれい：

mounted: function() { 
    this.$nextTick(function() { 
    // Code that will run only after the 
    // entire view has been rendered 
    }) 
} 

出典：あなたが書くことができますテンプレート/ HTMLの終了前にhttps://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 4

：

{{ updated() }} 

私はそれが助けてくれることを願っています。