CATEGORY

【Vue.nextTick】DOMの変更を検知して処理を行う方法

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制作では重宝しそうですね。

【Vue.js】provide/injectでデータバインディングする 前の記事 【Vue Test Utils】Unknown custom element: router-viewの解決法 次の記事

関連記事

コメント

この記事へのコメントはありません。