vue のキープアライブ コンポーネントを使用してページ レベルのキャッシュを実装する方法
はじめに:
Vue を開発に使用する場合、読み込み速度を向上させるためにページをキャッシュする必要がある状況によく遭遇します。ページとユーザーエクスペリエンス。 Vue のキープアライブ コンポーネントは、ページ レベルのキャッシュの実装に役立ち、特定のページが切り替え時に状態とデータを保持できるようになります。この記事では、Vue のキープアライブ コンポーネントを使用してページレベルのキャッシュを実装する方法を紹介します。
<keep-alive>
<router-view></router-view>
</keep-alive>
in上記のコードでは、
activated: コンポーネントがアクティブ化されたときに呼び出されます。つまり、コンポーネントがキャッシュからアクティブ化された状態に移行したときに呼び出されます。
deactivated: コンポーネントがキャッシュされるときに呼び出されます。つまり、アクティブ化からキャッシュされた状態に戻るときに呼び出されます。
<keep-alive>
<router-view v-on:activated="onActivated"
v-on:deactivated="onDeactivated">
</router-view>
</keep-alive>
<script><br>デフォルトのエクスポート { <br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>onActivated() {
// 组件被激活时的逻辑处理
},
onDeactivated() {
// 组件被缓存时的逻辑处理
}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>
上記のコードでは、
const Routes = [
{
path: '/', name: 'Home', component: Home, meta: { keepAlive: true } // 需要进行缓存
},
{
path: '/about', name: 'About', component: About, meta: { keepAlive: false } // 不需要进行缓存
}
]
上記のコードでは、ホームページにメタ フィールドを追加し、ページをキャッシュする必要があることを意味する keepAlive: true に設定しました。About ページについては、キャッシュしないことを意味する keepAlive: false に設定しました。キャッシュする必要があります。
次に、
<keep-alive>
<router-view v-bind:keep-alive="meta.keepAlive"></router-view>
</keep-alive>
上記のコードでは、v-bind を介して meta.keepAlive フィールドをキープアライブ コンポーネントに渡し、キープアライブ コンポーネント内で v-if を使用してキャッシュ コンポーネントが必要かどうかを判断します。
<keep-alive>
<router-view v-bind:keep-alive="meta.keepAlive"></router-view>
</keep-alive>
<script><br>デフォルトのエクスポート {<br> 計算結果: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>meta() {
const matchedRouter = this.$route.matched[0];
return matchedRouter.meta;
}</pre><div class="contentsignin">ログイン後にコピー</div></div><p> }<br>}<br></script>
上記の例では、計算された属性を通じて現在のルートに対応するメタ フィールドを取得し、それをキープアライブ コンポーネントに渡します。 vバインド。このようにして、ルーティング設定のメタフィールドに基づいてページのキャッシュを制御できます。
概要:
Vue のキープアライブ コンポーネントを通じて、ページ レベルのキャッシュを実現し、ページの読み込み速度とユーザー エクスペリエンスを向上させることができます。キャッシュする必要があるコンポーネントと、キャッシュとアクティブ化ステータスをリッスンするライフサイクル メソッドを設定することで、キャッシュされたコンポーネントの動作をより柔軟に制御できます。この記事が、Vue のキープアライブ コンポーネントの理解と適用に役立つことを願っています。
以上がVue のキープアライブ コンポーネントを使用してページレベルのキャッシュを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。