Vue.nextTick( [callback, context] )
Vue.nextTick()を使用すると、Vue.jsがデータの変更に基づいてDOMを更新した後に、何らかの処理（コールバック）を行うことができます。
例えば、特定要素のclass名やテキストが変わったタイミングなど…
公式ドキュメント：Vue.nextTick( [callback, context] )
ネイティブのJavaScriptだと、MutationObserverと同じような位置付けです。
【JavaScript】DOM要素の変更を検知するMutationObserver
サンプルコード
Vue.nextTick()を使用するなら、「VueはDOMの更新を非同期で実行する」ことを理解してください。
下記のサンプルコードを動作させてみると、mounted()でthis.messageの値を “Hello World”に更新しているのに、直後のコンソールではDOMの変更が反映されていません。
これが、VueがDOMの更新を非同期で実行することの証拠です。
<template>
<div>{{ message }}</div>
</template>
export default {
data: () => ({
message: "123"
}),
mounted() {
this.message = "Hello World";
console.log(this.$el.textContent); //"123"
this.$nextTick(() => {
console.log(this.$el.textContent); //"Hello World"
})
},
}
</script>this.$nextTick(() => {})にて、DOMの非同期更新を取得できるので、this.$nextTick内部のコンソールではデータの変更が反映されています。
下記は、ES2017 async/await 構文での実装になります。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data: () => ({
message: "123"
}),
async mounted() {
this.message = "Hello World";
console.log(this.$el.textContent); //"123"
await this.$nextTick()
console.log(this.$el.textContent); //"Hello World"
},
}
</script>updated()でも同様に使えます。
updated: function () {
this.$nextTick(function () {
// ビュー全体が再レンダリングされた後にのみ実行されるコード
})
}アプリ開発ではあまり使用頻度は多くないかもしれませんが、WEB制作では重宝しそうですね。
コメント