Vue3 v-once Directive
Vue3 Built-in Directivesv-onceThe directive is used to render elements and components only once; subsequent updates will be skipped.
Basic Description
v-onceThe directive is used to mark elements and components to be rendered only once. In subsequent re-renders, the element and all its child elements will be treated as static content and skipped. This can be used to optimize update performance.
- Expected Type: None (does not accept expressions)
- Purpose: Renders elements and components only once; subsequent updates are treated as static content and skipped.
Use Cases
1. Static Content Optimization
When certain content does not need to be updated, using v-once can avoid unnecessary re-rendering:
Example
<template>
<div>
<h1 v-once>{{ title }}</h1>
<p>Dynamic content: {{ dynamicContent }}</p>
<button @click="updateContent">Update</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Static Title',
dynamicContent: 'Variable Content'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Updated: ' + new Date().toLocaleTimeString()
}
}
}
</script>
<div>
<h1 v-once>{{ title }}</h1>
<p>Dynamic content: {{ dynamicContent }}</p>
<button @click="updateContent">Update</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Static Title',
dynamicContent: 'Variable Content'
}
},
methods: {
updateContent() {
this.dynamicContent = 'Updated: ' + new Date().toLocaleTimeString()
}
}
}
</script>
Other Extensions