Vue レンダリング時の {{}} のちらつきに対処する方法

今回は、vue レンダリング時に {{}} がちらつく場合の対処方法と、vue レンダリング時に {{}} がちらつく場合の注意事項について説明します。実際のケースを見てみましょう。

v-if と v-show は、日常の開発で最もよく使用される 2 つの命令かもしれませんが、似たような機能があるように見えますが、それでも大きな違いがあります。

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

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

 光看这句话一头雾水，后面紧接着说了用法：

和 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中文网其它相关文章！

推荐阅读：

怎样使用JS中EL表达式获取上下文参数

如何使用JS实现左边列表平移到右边

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