Vue3 v-once ディレクティブ
Vue3 組み込みディレクティブv-onceディレクティブは、要素とコンポーネントを一度だけレンダリングするために使用され、その後の更新はスキップされます。
基本説明
v-onceディレクティブは、要素とコンポーネントを一度だけレンダリングするようにマークします。その後の再レンダリングでは、要素とそのすべての子要素は静的コンテンツとして扱われ、スキップされます。これは更新パフォーマンスの最適化に使用できます。
- 期待される型: なし（式は受け付けません）
- 機能: 要素とコンポーネントを一度だけレンダリングし、その後の更新は静的コンテンツと見なしてスキップします。
使用シーン
1、静的コンテンツの最適化
一部のコンテンツを更新する必要がない場合、v-once を使用することで不要な再レンダリングを回避できます：
実例
<template>
<div>
<h1 v-once>{{ title }}</h1>
<p>動的コンテンツ: {{ dynamicContent }}</p>
<button @click="updateContent">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '静的タイトル',
dynamicContent: '可変コンテンツ'
}
},
methods: {
updateContent() {
this.dynamicContent = '更新済み: ' + new Date().toLocaleTimeString()
}
}
}
</script>
<div>
<h1 v-once>{{ title }}</h1>
<p>動的コンテンツ: {{ dynamicContent }}</p>
<button @click="updateContent">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '静的タイトル',
dynamicContent: '可変コンテンツ'
}
},
methods: {
updateContent() {
this.dynamicContent = '更新済み: ' + new Date().toLocaleTimeString()
}
}
}
</script>
その他の拡張