Vueでレンダリングする際のちらつきに対処する方法

今回は、Vue でレンダリングする際のちらつきに対処する方法を説明します。Vue レンダリングでちらつきに対処する場合の注意事項は何ですか。実際のケースを見てみましょう。

v-if と v-show の違い:

v-if ブロックを切り替えるとき、v-if のテンプレートには

data も含まれる可能性があるため、Vue.js には部分的なコンパイル/アンインストール プロセスが必要になります。 binding またはサブコンポーネントを定義します。 v-if は、条件付きブロック内のイベント リスナーとサブコンポーネントが適切に破棄され、スイッチ間で再構築されることが保証されるため、真の条件付きレンダリングです。

v-if も遅延です。最初のレンダリングで条件が false の場合、何も行われません。ローカル コンパイルは、条件が初めて true になったときにのみ開始されます (コンパイルはキャッシュされます)。

それに比べて、v-show ははるかにシンプルです - 要素は常にコンパイルされて保持され、CSS に基づいて単純に切り替えられます。

簡単に言うと、この 2 つの最大の違いは、v-if は条件が満たされた場合にのみコンパイルされるのに対し、v-show は条件が満たされるかどうかに関係なく常にコンパイルされることです。 CSS の表示を単純に切り替えるだけです。

該当するシナリオ:

2 つの本質的な違いを理解すると、v-if の使用と、いつ v-show を使用するかが簡単になります。

一般に、v-if はスイッチング コストが高く、v-show は初期レンダリング コストが高くなります。したがって、頻繁に切り替える必要がある場合は v-show が適しており、実行時に条件が変化する可能性が低い場合は v-if が適しています。

たとえば、多くのページが端末ごとに異なる動作をするようになりました。最も一般的なのは、多くの APP ページが WeChat 上で開かれたときにダウンロード プロンプトを表示することですが、この場合、端末のステータスは表示されません。は決定され、ロード時に変更されないため、ダウンロードした部分が APP で開かれたときにコンパイルされないように v-if を使用するのが適しています。

v-showは、基本的に2つの状態を頻繁に切り替える必要があるため、条件に応じてページ上の要素を表示/非表示にするなどの場所で使用するのが最適です。前述したように、v-showの切り替えの消費は少なくなります。 v-if よりも。

複数の条件

多くの場合、コードでは複数の

条件判断が必要ですが、vueにはv-ifとv-elseしかなく、v-elseifのような命令はありません。同様の指示はありませんが、この問題を解決する方法はまだいくつかあります。

方法 1: template

<p v-if="xxx"></p>
<template v-else>
<p v-if="yyy"></p>
<p v-else></p>
</template>

方法 2:partial

要素は登録された部分スロットであり、部分は挿入時に Vue によってコンパイルされます。 要素自体が置き換えられます。 要素には name 属性を指定する必要があります。

これは

JavaScript のネイティブのフラグメント要素を彷彿とさせますが、同じものではありません。パーシャルには静的パーシャルと動的パーシャルがあり、上記の問題を解決するには動的パーシャルを使用する必要があります。

例:

// 注册 partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

複数条件の問題を解決するには、状況ごとにそれぞれの部分文を事前に登録し、その部分文の name 属性を判定条件にバインドすることで、複数の条件判定を実現できます。

その他:

1. v-if ディレクティブはテンプレートのパッケージ化要素に適用できますが、v-show は、

の優先順位のため、テンプレート

をサポートしません。解決策は、v-else を別の v-show に置き換えることです。

// 错误
<custom-component v-show="condition"></custom-component>
<p v-else>这可能也是一个组件</p>
// 正确做法
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>

Vue ページがロードされると、隠し要素が表示されます。 v-show で設定したエラーが表示されてページがちらつく

APP コミュニティページを作成するときに、いくつかの場所で v-show を使用したところ、ロジックが false と判断された場合でも、一部の要素は表示しないで、顔がすぐに表示されます。要素が小さい場合は大丈夫ですが、特に広い領域になると非常に不快になるため、ネットで検索して確認しました。解決策があることが判明しました。

方法 1: v-cloak

公式の説明はたったの 1 文です: この命令は、関連付けられたインスタンスがコンパイルを終了するまで要素に残ります。 この文を読んだだけで混乱しましたが、次の用法が続きました:

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

 示例代码：

// <p> 不会显示，直到编译结束。
[v-cloak] {
display: none;
}
<p v-cloak>
{{ message }}
</p>

 方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。

 而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue.js实现可配置登录表单步骤详解

怎样传递数组参数至后台

以上がVueでレンダリングする際のちらつきに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。