What is Vue 3 performance optimization techniques?

Vue 3 performance optimization strategies: 1. v-once and v-memo: v-once renders element once and skips future updates. v-memo="[dep1, dep2]" — memoize subtree, only re-render when dependencies change: useful in v-for lists: <li v-for="item in list" :key="item.id" v-memo="[item.isSelected]">. 2. Virtual scrolling: for large lists (10,000+ items), only render visible items using vue-virtual-scroller or @tanstack/virtual. 3. Lazy loading: lazy-load routes and heavy components with defineAsyncComponent and dynamic imports. 4. Computed properties over methods: computed caches results until dependencies change; methods recalculate every render. 5. shallowRef / shallowReactive: for large objects where deep reactivity is not needed: const data = shallowRef(bigObject) — only top-level property changes are reactive. 6. Non-reactive large data: if data doesn't need reactivity (third-party chart instances, non-UI data), use markRaw(): const chart = markRaw(new Chart(...)); — skips proxy wrapping. 7. Async components: split heavy components into separate chunks. 8. Bundle size: tree-shake Vue features not used (Vue 3 is fully tree-shakeable). 9. Event handler caching: Vue 3 compiler caches inline handlers: @click="() => foo()" is cached. 10. SSR + prerender: for content-heavy pages, SSR/SSG dramatically improves FCP. 11. Vite for dev: Vite's native ESM dev server is 10-100x faster than Webpack for HMR.