vue レンダリング時に {{}} がちらつく問題と解決策

v-if と v-show は、おそらく日常の開発で最もよく使用される 2 つの命令です。これらは似た機能を持つように見えますが、それでも大きな違いがあります。次に、この記事では、vue のレンダリング中に発生する {{}} のちらつきの問題と解決策について説明します。興味のある方は、v-if と v-show の 2 つが最もよく使用される命令であると考えられます。日常の開発では、この 2 つの機能は似ているように見えますが、それでも大きな違いがあります。

v-if と v-show の違い: v-if ブロックを切り替える場合、v-if のテンプレートにはデータ バインディングも含まれる可能性があるため、Vue.js には部分的なコンパイル/アンインストール プロセスが必要になります。またはサブコンポーネント。 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:テンプレート

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

方法2:部分

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

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

例:

// 注册 partial
Vue.partial(&#39;my-partial&#39;, &#39;<p>This is a partial! {{msg}}</p>&#39;)
<!-- 静态 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-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 を使用していることに気付きました。ロジックが偽と判断された場合、一部の要素が表示されるべきではないときに表示され、要素が小さい場合は大丈夫でしたが、特に大きな場所になると非常に見えます。不快だったので、解決策はないかとネットで検索したところ、確かに解決策があることが分かりました。

方法 1: v-cloak

公式の説明はたったの 1 文です: この命令は、関連付けられたインスタンスがコンパイルを終了するまで要素に残ります。

この文を読んだだけでは混乱しますが、使い方はすぐに続きます:

などの CSS ルールと一緒に使用すると、このディレクティブは、インスタンスが準備されるまで、コンパイルされていない Mustache タグを非表示にすることができます。

[v-cloak] { display: none } つまり、v-cloak ディレクティブは CSS セレクターのように CSS スタイルのセットをバインドでき、この CSS セットはインスタンスがコンパイルされるまで有効になります。

サンプルコード:

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

方法 2: v-text

vue ではデータを 2 つの中括弧で囲んで HTML に置きますが、vue 内ではすべて二重括弧になります。 textNode の v-text ディレクティブにコンパイルされます。

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

示例代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

零基础学习AJAX之AJAX框架

零基础学习AJAX之制作自动校验的表单

ajax的get请求时缓存处理解决方法

以上がvue レンダリング時に {{}} がちらつく問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。