vue.js3超初心者向け。簡単なサンプルコードを使ったnextTickの使い方
242 回閲覧されました
みなさんこんにちは、jonioです。
今回はvue.js3のnextTickの使い方についての解説です。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
nextTickとは
DOMの更新が終わってから処理をしたい時に使います。
これだけですが人によっては具体的なコードで説明した方がイメージが沸きやすいと思うので簡単なコードで説明します。
サンプルコード
下記のコードで考えます。
<template>
<p ref="countEl">{{ count }}</p>
<button @click="increment">増やす</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const countEl = ref(null);
function increment() {
count.value++;
console.log("pタグの中身:", countEl.value.textContent);
}
</script>注目して欲しいのは14行目です。
3行目の増やすボタンをクリックすると「pタグの中身:0」の0が1→2→3・・・と増えていきます。
しかし下記のコードの場合は16行目の時点では動作しません。
<template>
<p ref="countEl">{{ count }}</p>
<p ref="countEl">{{ level }}</p>
<button @click="increment">増やす</button>
</template>
<script setup>
import { ref, nextTick } from 'vue';
const count = ref(0);
const level = ref(0);
const countEl = ref(null);
function increment() {
count.value++;
console.log("pタグの中身:", countEl.value.textContent);
level.value++;
}
</script>vue.jsでの更新のタイミングは1つのメソッドの中の処理が全て終わったタイミング（17行目が終わったタイミング）です。
16行目の記述の位置を変えれば済むのですが面倒だし処理が複雑になると位置を変えることができなくなってきます。
こんな場合にnextTickが便利になります。
nextTickのメリット
DOMの更新が終わった時点で動作させるようにできるのがnextTickです。
これを使えば記述の位置を変える必要がなくなります。
記述を下記に変更します。
<template>
<p ref="countEl">{{ count }}</p>
<button @click="increment">増やす</button>
</template>
<script setup>
import { ref, nextTick } from 'vue';
const count = ref(0);
const countEl = ref(null);
function increment() {
count.value++;
nextTick(() => { //この行を追加
console.log("pタグの中身:", countEl.value.textContent);
}); //この行を追加
}
</script>14行目と16行目があることで13行目の処理をしてDOMの更新が行われたあとに15行目が動作するので正常な動作になります。