今回は、DOMの更新が完了した後に処理を行うことができるnextTickについて紹介します。
Vue.jsのDOM更新
VueはDOMの更新を非同期で行います。
Vue.jsのアプリケーションでは、しばしばDOMの更新が終了した後に何らかの処理を行いたい時があります。
例えば以下のコードを実行すると、コンソールログには「Hello Vue.js!」ではなく「Welcome to Vue.js!」が表示されます。
HTML
|
1 2 3 |
<div id="app"> {{message}} </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Vue.createApp({ data: function() { return { message: 'Welcome to Vue.js!' } }, mounted: function() { // messageを更新します。 this.message = 'Hello Vue.js!'; // コンソールにログを出力します。 console.log(this.$el.textContent); } }).mount('#app') |
アプリケーション側では「Hello Vue.js!」を期待しているのですが、messageを更新した直後は、まだDOM（ここではルートのdiv要素）が更新されていないため、this.$el.textContentでは、更新前の値「Welcome to Vue.js!」取得されます。
（dataオプションに定義したmessageプロパティを更新（「Hello Vue.js!」に変更）した直後にVueインスタンスにマウントされている要素のテキストを取得しても更新後の値を取得することはできません。）
DOMの更新を待つ
ネイティブのJavaScript関数のsetTimeoutを使用すれば処理を遅らせることができるので、this.$el.textContentで「Hello Vue.js!」を出力することもできます。
しかし、Vue.jsではsetTimeout関数を使わなくても、DOMが更新された後に処理を行う方法が用意されています。
DOMが更新された後に処理を行いたい時には、nextTickメソッドを利用します。
nextTick
Vue.jsの公式サイトには、以下の記載があります。
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.
【訳】
callback を延期し、DOM の更新サイクル後に実行します。DOM 更新を待ち受けるために、いくつかのデータを変更した直後に使用してください。
nextTickは、次のDOM更新サイクルの後に実行されるコールバックを延期します。データを変更した直後に使用して、DOMの更新を待ちます。
nextTickメソッドを使用すると、プログラムからデータを変更してVue.jsがデータの変更に基づいてDOMを更新した後、ブラウザーがデータの変更をページに表示（反映）する前に何らかの処理（コールバック）を行うことができます。
nextTickの使用例
以下にnextTickをメソッド利用して、DOMが更新された値をコンソールのログに出力する例を示します。
HTML
|
1 2 3 |
<div id="app"> {{message}} </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Vue.createApp({ data: function() { return { message: 'Welcome to Vue.js!' } }, mounted: function() { this.message = 'Hello Vue.js!'; // コンソールにログを出力します。 console.log(this.$el.textContent); this.$nextTick(function() { // nextTickを使用してコンソールにログを出力します。 console.log(this.$el.textContent); }); } }).mount('#app') |
Vueインスタンスの$nextTickメソッド（this.$nextTick）の引数に、コールバック関数を指定します。
コールバック関数内の処理（ここではconsole.log(this.$el.textContent);）は、DOMの更新が完了した後に実行されますので、データを更新した直後に実行してもDOMの値が更新後のデータとして取得できます。
上記のコードをブラウザーで実行すると、コンソールログには以下の2行が表示されます。
|
1 2 |
Welcome to Vue.js! Hello Vue.js! |
