ホームページ > 記事 > ウェブフロントエンド > vue はリアルタイムで dom を更新しますか?
#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。vue はリアルタイムで dom を更新しません。 Vue でのデータ更新は非同期です。つまり、データを変更した直後には、変更された DOM 要素を取得することはできません。 Vue は、DOM の更新時に非同期で実行されます。データの変更が検出される限り、Vue はキューを開いて、同じイベント ループ内で発生するすべてのデータ変更をバッファリングします。同じウォッチャーが複数回トリガーされた場合、プッシュされるのは 1 回だけです。キュー内では、バッファリング中のこの重複排除は、不必要な計算や DOM 操作を避けるために非常に重要です。
Vue でのデータ更新は非同期です。 つまり、データを変更した直後には、変更された DOM 要素を取得できません。
Vue は、DOM の更新時に非同期で実行されます。データの変更が検出される限り、Vue
はキューを開き、すべてのデータにバッファリングします。同じイベント ループで発生する変更は、同じ
watcher が複数回トリガーされた場合、キューに 1 回だけプッシュされます。バッファリング中の重複データのこの削除は、不要な計算と
DOM# を回避するのに役立ちます。 ##この操作は非常に重要です。次のイベント ループ tick
で、Vue
がキューをフラッシュし、実際の (重複排除された) 作業を実行します。Vue
非同期キューにネイティブの Promise.then
、MutationObserver
、および setImmediate
を使用しようとします。実行環境がサポートしていない場合は、それが使用されます。代わりに setTimeout(fn, 0) を使用します。
1. いつ実際の DOM 要素を取得できますか?
Vue の nextTick コールバック内。
2. Vue が最新の DOM を取得するために nextTick メソッドを使用する必要があるのはなぜですか?
vue がビューを更新するために Watcher を呼び出すとき、直接更新されません。代わりに、更新する必要がある Watcher を queueWatcher キューに追加し、特定の更新メソッド flashSchedulerQueue を nexTick に渡します。電話をかけるため。
// src > core > observer > watcher.js + scheduler.js// 当一个 Data 更新时,会依次执行以下代码 // 1. 触发 Data.set // 2. 调用 dep.notify // 3. Dep 会遍历所有相关的 Watcher 执行 update 方法 class Watcher { // 4. 执行更新操作 update() { queueWatcher(this); } } const queue = []; function queueWatcher(watcher: Watcher) { // 5. 将当前 Watcher 添加到异步队列 queue.push(watcher); // 6. 执行异步队列,并传入回调 nextTick(flushSchedulerQueue); } // 更新视图的具体方法 function flushSchedulerQueue() { let watcher, id; // 排序,先渲染父节点,再渲染子节点 // 这样可以避免不必要的子节点渲染,如:父节点中 v-if 为 false 的子节点,就不用渲染了 queue.sort((a, b) => a.id - b.id); // 遍历所有 Watcher 进行批量更新。 for (index = 0; index <blockquote data-pid="PSfhlM9Q"></blockquote><div class="highlight"></div><p data-pid="iRogEw4w">2.2 nextTick -- 受信したflushSchedulerQueueをコールバック配列に追加し、timerFuncメソッドを実行します。 <img src="https://img.php.cn/upload/image/532/584/431/1671083781908087.png" title="1671083781908087.png" alt="vue はリアルタイムで dom を更新しますか?"></p><pre class="brush:php;toolbar:false">const callbacks = []; let timerFunc; function nextTick(cb?: Function, ctx?: Object) { let _resolve; // 1.将传入的 flushSchedulerQueue 方法添加到回调数组 callbacks.push(() => { cb.call(ctx); }); // 2.执行异步任务 // 此方法会根据浏览器兼容性,选用不同的异步策略 timerFunc(); }2.3 timerFunc メソッド -- ブラウザの互換性に基づいて作成された非同期メソッドです。このメソッドの実行後、特定の DOM 更新のために flashSchedulerQueue メソッドが呼び出されます。
let timerFunc; // 判断是否兼容 Promise if (typeof Promise !== "undefined") { timerFunc = () => { Promise.resolve().then(flushCallbacks); }; // 判断是否兼容 MutationObserver // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver } else if (typeof MutationObserver !== "undefined") { let counter = 1; const observer = new MutationObserver(flushCallbacks); const textNode = document.createTextNode(String(counter)); observer.observe(textNode, { characterData: true, }); timerFunc = () => { counter = (counter + 1) % 2; textNode.data = String(counter); }; // 判断是否兼容 setImmediate // 该方法存在一些 IE 浏览器中 } else if (typeof setImmediate !== "undefined") { // 这是一个宏任务,但相比 setTimeout 要更好 timerFunc = () => { setImmediate(flushCallbacks); }; } else { // 如果以上方法都不知道,使用 setTimeout 0 timerFunc = () => { setTimeout(flushCallbacks, 0); }; } // 异步执行完后,执行所有的回调方法,也就是执行 flushSchedulerQueue function flushCallbacks() { for (let i = 0; i <p data-pid="dQWmc_nO"></p><div class="highlight"></div><p data-pid="AIne5ybj">2.4 論理的判断の改善<img src="https://img.php.cn/upload/image/752/824/242/1671083793545309.png" title="1671083793545309.png" alt="vue はリアルタイムで dom を更新しますか?"></p>2.4.1 has 識別子を判断して、同じウォッチャーをキューに追加しないようにします。<p data-pid="AIne5ybj"></p>2.4.2 すべてのウォッチャーを 1 ティックで更新できるように待機フラグを決定します; <p data-pid="7TkhHcvR"></p>2.4.3 ウォッチャーのレンダリング時に生成される可能性のある新しいウォッチャーを処理するフラッシュ フラグを決定します。 <p data-pid="Rma8bEoK"></p> v-if 条件がトリガーされると、新しい Watcher がレンダリングされます。 <p data-pid="O_FBWrsz"></p><p data-pid="0jYEMq_x"></p><p data-pid="7fKFXAwF">ヒント: nextTick は、Promise、setTimeout、その他のメソッドを通じて単純にシミュレートされた非同期タスクです。 <img src="https://img.php.cn/upload/image/646/390/740/1671083804816099.png" title="1671083804816099.png" alt="vue はリアルタイムで dom を更新しますか?"></p><p data-pid="7fKFXAwF">3. this.$nextTick が更新された DOM を取得できるのはなぜですか? </p><p data-pid="ZKUBUXWF"><strong> this.$nextTick を呼び出すと、実際には図の nextTick メソッドが呼び出され、非同期キュー内のコールバック関数が実行されます。先入れ先出しの原則に従い、Data の変更によってトリガーされる更新非同期キューが最初に実行され、実行が完了した後、新しい DOM が生成されます。次に、this.$nextTick のコールバック関数が指定されると、実行すると、更新された DOM 要素を取得できます。 </strong></p><pre class="brush:php;toolbar:false">// 我们使用 this.$nextTick 其实就是调用 nextTick 方法 Vue.prototype.$nextTick = function (fn: Function) { return nextTick(fn, this); };
Vue でデータを変更すると、すべてのデータとこのデータに関連するウォッチャーが更新されます。
基本プログラミング ビデオ )
以上がvue はリアルタイムで dom を更新しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。