Vue コードの実行とブラウザーのレンダリング順序

この記事では「同じウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは1回だけである」について説明します。

例1

では、これは何を意味するのでしょうか？例えば：

このようなコードがあります。ボタンをクリックすると、sum+=1 が 2 回実行され、ボタンをクリックすると、addTwice メソッドのコードの最初の行が実行されます。この時点では、sum は 1 に等しくなります。コードの 2 行目が実行され、 sum It は 2 に等しくなります。すると、ページ上のデータが変換されて 2 になることがわかります。最初に 1 になってから 2 になるのではなく。

実際、これが上の文の意味です。キューにプッシュされるのは 1 回だけです。この目的は、「不要な計算や DOM 操作を避けるためにバッファリング時に重複データを削除することが非常に重要である」ことです。つまり、ページは複数回更新されませんが、コードはページは実行完了後にのみ更新されるため、ブラウザによる複数のレンダリングが回避され、パフォーマンスと時間が無駄になります。

例 2

上の例ではその良さが伝わらないかもしれませんが、次の例と nextTick を組み合わせると秒数が分かるでしょう。

ボタンをクリックすると、入力ボックスが表示されてフォーカスを取得したときに、最初は入力ボックスが非表示であるという要件があります。

    <div id="root">
        <button @click="show">点击显示</button>
        <input type="text" ref="testRef" v-show="ishow">
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:"#root",
            data:{
                ishow:false
            },
            methods:{
                show(){
                    this.ishow = true
                    this.$refs.testRef.focus()
                }
            }
        })
    </script>

コードをコピーして確認できますが、これでは要件をまったく満たしません。

説明:なぜ要件を満たせないのですか? 原理は上記と同じです。ページの複数回のレンダリングを避けるために、Vue は show メソッド内のすべてのコードを実行した後でのみページをレンダリングします。したがって、上記のコードの最初の行が実行されると、ページには true に等しい v-show がありますが、ページには表示されないため、この時点で 2 行目を実行してフォーカスを取得できますが、それはできません。このコードを実行すると、ページは [入力ボックスがまったくありません] になり、ブラウザはこのコードの実行後にのみページをレンダリングし、入力ボックスが表示されるため、まったくわかりません。

解決方法: nextTick をまだ覚えていますか。すべての dom ノードが更新された後に実行してください。詳細については私の記事を確認し、クリックして移動してください。したがって、nextTickを追加することで解決できます。

    <div id="root">
        <button @click="show">点击显示</button>
        <input type="text" ref="testRef" v-show="ishow">
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:"#root",
            data:{
                ishow:false
            },
            methods:{
                show(){
                    this.ishow = true
                    this.$nextTick( () => {
                        this.$refs.testRef.focus()
                    })
                }
            }
        })
    </script>

最近の勉強では、Vue の根本的な原理を理解したい場合、JavaScript の実装原理を知っていると理解しやすいことが分かりました。JavaScript をベースに書かれた Vue と比較して、Ruby を読み込むことになります。後ほど書籍「JavaScript 上級プログラミング」を読んでいただくと、啓発的な知識が得られるので、よりわかりやすくみんなにシェアしましょう！

Vue コードの実行とブラウザーのレンダリング順序

例1

例 2

おすすめ