More than 3 years have passed since last update.

Vue.nextTickとthis.$nextTick

Posted at 2020-02-16

再描画を待つために使う nextTick ですが、グローバルな Vue.nextTick を使うべきか、それとも this.$nextTick を使うべきか。
迷ったら this.$nextTick を使った方がよさそうと感じました。

Vue.jsでは アロー関数 は期待しない動作になる場合があります。つまり this が直感的に使えないです。こちらの記事にも書いています。

例えば アロー関数 がそのまま使えない watch で Vue.nextTick を使う場合は以下のようになります。 this の参照を同一スコープ内に保持しておく必要があります。

watch: {
  hoge() {
    const vm = this; // 参照を保持
    Vue.$nextTick(function() {
      vm.fuga++; // thisを使う処理
    });
  }
}

これに対して this.$nextTick を使うと this の束縛が行われるため直感的です。

watch: {
  hoge() {
    this.$nextTick(function() {
      this.fuga++; // thisがそのまま使える
    });
  }
}

迷ったらとりあえず this.$nextTick でよいと感じます。