Vue.js: What is the difference between keep-alive and v-once?

keep-alive — cache component. v-once — render once.

keep-alive:

• Cache component state.
• Avoid re-render.
• Switch tabs.

v-once:

• Render once.
• Never update.
• Static content.

1<!-- keep-alive -->
2<KeepAlive>
3  <component :is="currentTab" />
4</KeepAlive>
5
6<!-- v-once -->
7<div v-once>{{ expensive() }}</div>

Key: keep-alive for caching, v-once for static.