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

今回はvueレンダリングページの{{}}がちらつく場合の対処法を紹介します。vueレンダリングページ{{}}がちらつく場合の注意点は以下の通りです。見てください。

v-if と v-show は、日常の開発で最もよく使用される 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: 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-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双向数据绑定实例详解

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