この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:T
更新日時:2019-07-20 08:49:04

タイトル: $nextTickの使い方(ライフサイクルフック)
SEOタイトル: 【Vue.js】$nextTickの使い方(ライフサイクルフック)

この記事の要点
  • Vue.js の $nextTick: DOM 更新が完了した直後に処理を実行するためのフック
  • mounted / updated だけでは子コンポーネントの再レンダ完了が保証されない
  • 書式: this.$nextTick(() => { ... })
  • 描画反映後の DOM 高さ計測・スクロール位置調整・外部ライブラリ初期化に有効

 

mountedやupdatedを使用しても全ての子コンポーネントがマウント/再レンダリングされていることが保証されない。

保証するには$nextTickを使用する必要がある。

以下、実装例。

var app = new Vue({

  el: '#app',

  mounted: function () {

    this.$nextTick(function () {

      console.log("mounted");

    })

  },

  updated: function () {

    this.$nextTick(function () {

      console.log("nextTick");

    })

  },

})