Lesser‑Known Vue.js Built‑in Directives: v‑once, v‑pre, and v‑memo

Vue's built‑in directives such as v-for and v-if are widely used; this article focuses on three less common directives— v-once , v-pre , and v-memo —that can boost performance or control compilation when used appropriately.

v‑once

Purpose: Render an element or expression only once; subsequent data changes do not trigger updates, making it useful for static content and performance optimization.

Implementation principle: During component initialization Vue marks nodes with v-once . The first render processes them normally; later renders skip any node bearing this marker.

Example code:

<template>
  <div>
    <span v-once>{{ message }}</span>
    <img v-once :src="imageUrl" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
let message = ref('Vue指令!');
let imageUrl = ref('/path/my/image.jpg');
setTimeout(() => {
  message.value = '修改内容!';
  imageUrl.value = '/new/path/my/images.jpg';
}, 2000);
</script>

Note: Elements with v-once lose reactivity; ensure the region truly does not need updates, otherwise the view may become out‑of‑sync with data.

v‑pre

Purpose: Instruct the Vue compiler to skip compilation of the element, treating its content as static raw HTML.

Implementation principle: When the compiler encounters v-pre during the initial compile, it bypasses that subtree and inserts the original HTML directly into the DOM.

Example code:

<template>
  <div>
    <h2>常规: {{ message }}</h2>
    <h2 v-pre>使用v-pre后: {{ message }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';
let message = ref('您好!');
</script>

Note: v-pre differs from v-once ; v-pre skips compilation entirely, while v-once renders once but still participates in reactivity.

v‑memo (Vue 3.2+)

Purpose: Optimize component rendering by caching a vnode and re‑rendering only when specified reactive data changes, reducing unnecessary updates for large or complex lists.

Implementation principle: Vue detects the v-memo attribute during component initialization, caches the vnode, and on subsequent updates compares the declared dependencies; only when they differ does Vue re‑render the subtree.

Example code:

<template>
  <div>
    <ul v-memo="arr">
      <li v-for="(item, index) in arr" :key="index">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
let arr = ref([
  { text: '内容1' },
  { text: '内容2' },
  { text: '内容3' }
]);
setInterval(() => {
  arr.value[1].text = '修改2';
}, 2000);
</script>

Note: Use v-memo primarily for long lists or complex render trees; it should not be over‑used for simple structures.

Conclusion

The article summarized three relatively obscure Vue built‑in directives— v-once , v-pre , and v-memo —showing that, although they are not frequently used, applying them in the right scenarios can noticeably improve performance.