ホームページ > 記事 > バックエンド開発 > vue での next と Tick (nextTick) の分析

vue での next と Tick (nextTick) の分析

不言オリジナル: 2018-07-14 11:02:3313478ブラウズ

この記事では主に vue の next と Tick (nextTick) の解析について紹介します。ある参考値があるので共有します。困っている友達は参考にしてください。

まえがき

これまで vue のソースコードを見たことはありませんでしたが、ソースコードを読んだ後、いくつかの質問があります。ソースコードが表示されない場合でも、nextTick の使用についてまったく疑問を持ちません。更新されたバージョンを入手したいことはわかっていました。DOM にコールバックを書き、それが正確であることを確認しました。ある日、興味を持ってコードをデバッグしたところ、いくつかの疑問が見つかりました....

推奨マニュアル:Vue .js 基本チュートリアル

When will this Tick start?

Baidu でイベントループを検索すると、多くの記事が表示されます。しかし、多くの記事を読んだ後、彼らは私に知らせてくれなかったか、最初のティックがいつ始まったかを著者が説明しませんでしたが、幸いなことにスカイシティの誰かがそれを明確に言いました。以前のナゲッツの記事のコメントで答えを得たことを覚えています答えは、グローバルスクリプトが実行を開始するということです。ティックのラウンド

このティックはいつ終了しますか?

これは、検索データに基づいて私が得た結論でもあります。 GUI がレンダリングされるとティックは終了しますが、レンダリングが開始される前に、js エンジンはすべてのマイクロタスクキューが実行された後、新しい名前はジョブとなり、マクロタスクはタスクと呼ばれます

何をすべきかティックが終了した後?

イベントタスクキューにタスクがあるかどうかを引き続き確認します。ない場合は、空でなくなるまで静かに待ちます。ある場合は、引き続き 2 回目のティックを開始し、タスクを取り出して、
これを表すために絵を描きました。プロセス

vue での next と Tick (nextTick) の分析

この結論は、現時点で私が正しいと考えているものです。コメントして議論していただければ幸いです。あなたが間違っていると思う何かが間違っています。

次は何を意味しますか?

公式サイトの説明によると

次のDOM更新サイクルが終了した後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。

個人的には、次の dom 更新ループが何を指しているのか理解できませんが、イベントループと同じですか?この DOM 更新サイクルはいつ開始され、いつ終了しますか?誰かが知っていて説明できることを願っています。コールバックを実行するタイミングは次のティックの前だと思います。以下のコードがわかります。
HTML にこのコード行があると仮定します。<p ref="msg">{{msg }} p></p>
mounted で実行します

this.msg = 'hello';
this.$nextTick(()=>{
    console.log(this.$refs.msg.innerHTML)
})

vue での上記コードの実行処理は大まかに以下のとおりです
vue での next と Tick (nextTick) の分析

上記のプロセス分析により、nextTick 内のコールバックは現在のタイムループ内で実行され、次のイベントループでは実行されません。したがって、次のイベントループが実行されるときには dom は確かに最新の状態になりますが、コールバックは次のイベントループでは実行されません。

おすすめ関連記事:
1.Vue の nextTick メソッドの詳細な紹介
2. Vuejs の nextTick() を使用して非同期更新キューを実装します。関連動画のおすすめ:
1.
JavaScript クイックスタート_翡翠少女般若心経シリーズ

概要

1.nextTick のコールバックは、このラウンドのティックループで実行されます

2. すべてのマイクロタスクはこのティックラウンドで実行されます##3. マクロタスク、つまりタスクは 1 つのティックではなく、異なるティックで実行されます
#上記は全体の内容ですこの記事の内容は、皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。