nextTick() メソッド

nextTick() メソッドは非常に強力なツールであり、次の DOM 更新の更新を待機するツールメソッドです。次の DOM 更新サイクルまで関数の実行を非同期的に延期するために使用されます。

Vue で応答状態を変更すると、最終的な DOM 更新は同期されませんが、Vue は次の「ティック」までそれらをキューにキャッシュします。これは、状態変化が何度発生しても、各コンポーネントが 1 回だけ更新されるようにするためです。

nextTick() は状態変更の直後に使用でき、DOM 更新サイクルの最後に実行されるコールバック関数を引数として受け取ります。nextTick() メソッドは、次の DOM 更新サイクルまで非同期操作を延期できるため、データ変更後に更新された DOM が正しく取得されることが保証されます。

vue3 では、nextTick() は Promise オブジェクトなので、await によって返される Promise を使用することもできます。

使用法

コールバック関数の使用

Vue 3 では、$nextTick() メソッド。$nextTick() メソッドは、Vue 3 によって提供されるインスタンスメソッドで、コンポーネントで非同期操作を実行するために使用できます。nextTick() メソッドを使用した簡単な例を次に示します。

export default {
    
    
  data() {
    
    
    return {
    
    
      name: "Vue 3"
    };
  },
  methods: {
    
    
    showName() {
    
    
      console.log(this.$el.innerHTML);   // 'Vue 3'
    },
    updateName() {
    
    
      this.name = "Vue 4";
      this.$nextTick(this.showName);
    }
  }
}

上記のコードでは、コンポーネントを定義し、その中にデータ属性名と 2 つのメソッド showName と updateName を定義します。showName メソッドはコンポーネントの innerHTML を出力するために使用され、updateName メソッドは name 属性の値を変更するために使用され、showName メソッドは変更が完了した後に$nextTick()メソッドこの目的は、変更の完了後に更新された DOM を確実に取得することです。

使い方を待つ

export default {
    
    
  data() {
    
    
    return {
    
    
      name: "Vue 3"
    };
  },
  methods: {
    
    
    showName() {
    
    
      console.log(this.$el.innerHTML);   // 'Vue 3'
    },
   async updateName() {
    
    
      this.name = "Vue 4";
      await this.$nextTick(); 
      this.showName(); 
    }
  }
}

実現原理

Vue3 では、コンポーネントの状態に変更を加えると、実際にそれを更新キューに追加し、そのキュー内のすべての変更が次の「更新サイクル」で DOM に適用されます。この動作は非同期更新と呼ばれます。

nextTick() メソッドは、コンポーネントの状態が変化した後に更新された DOM にアクセスする良い機会を提供します。

Vue3 の nextTick() メソッドは、Promise とマイクロタスクキューの間のコールバックをラップすることによって実装されます。マイクロタスクは、現在のタスクが完了するとすぐに実行されるタスクであり、Promise の then() は、メインスレッドをブロックせずに非同期操作を実行する方法です。Promise のsolve() メソッドは、成功ステータスを生成する Promise であり、マイクロタスクキューをラップし、キューの最後に新しいタスクを追加するために使用できます。

nextTick()メソッドの実装原理のサンプルコードは以下のとおりです。

let callbacks = [] // 存储回调函数的数组
let pending = false // 标记是否有待处理的任务

// 执行任务队列的函数
const flushCallbacks = () => {
    
    
  // 标记为 "待处理任务" 的任务已处理
  pending = false 
  
  // 复制回调函数数组并清空当前数组，以防回调函数在执行期间被添加
  const copies = callbacks.slice(0)
  callbacks = []
  
  // 依次执行每个回调函数
  for (let i = 0; i < copies.length; i++) {
    
    
    copies[i]()
  }
}

// 添加任务到任务队列的函数
const nextTick = (cb) => {
    
    
  callbacks.push(cb) // 将回调函数添加到待处理任务的数组中
  if (!pending) {
    
     // 如果当前没有待处理任务，则标记为待处理
    pending = true
    Promise.resolve().then(flushCallbacks) // 创建 Promise，并加入到微任务队列中，then()中执行 flushCallbacks() 函数
  }
}

使用する場合は、 nextTick() メソッドを直接呼び出します。

nextTick(() => {
    
    
    // 在DOM更新后执行回调函数
    console.log('DOM updated!')
})

更新キューに追加された変更は次の「更新サイクル」で処理され、その間に Vue3 は変更を DOM に適用するため、nextTick() コールバックが実行されると、最新の DOM 状態が表示されます。コールバックをマイクロタスクキューにすぐに追加するのではなく、キューに入れると、同じ一般的な状況でのコールバックの繰り返し呼び出しが回避され、パフォーマンスが向上します。

nextTick() メソッドを使用する場合の考慮事項

nextTick() メソッドを使用する場合は、次の点に注意する必要があります。

コードの可読性と保守性が低下するため、 nextTick() メソッドに依存しすぎないでください。
nextTick() メソッドは、次の DOM 更新サイクルの最後にコールバック関数を実行するため、コールバック関数には一定の遅延が生じる可能性があります。
nextTick() メソッドを使用する場合、パフォーマンスへの影響を避けるために、コールバック関数が DOM を複数回変更しないようにする必要があります。
コールバック地獄を回避する: コールバック関数のネスト層が多すぎると、コードが保守不能になる可能性があります。
nextTick() メソッドを適切に使用します。 nextTick() メソッドは、DOM が更新された後にコールバック関数を実行する必要がある場合にのみ使用します。

nextTick() メソッドは非常に強力なメソッドであり、開発プロセスで頻繁に使用されますが、悪用されたりパフォーマンスが低下したりしないように、使用する場合は上記の点に注意する必要があります。

さて、nextTick() メソッドの使用に関するチャットはこれで終わりです。気に入ったら、「いいね！」して、フォローしてお気に入りに追加してください。

vue3 の nextTick()

目次

nextTick() メソッド

使用法

コールバック関数の使用

使い方を待つ

実現原理

nextTick() メソッドを使用する場合の考慮事項

おすすめ