Vue JS Vue JS Performance Optimization

Question 1

What does the v-once directive do in Vue to help with performance?

Accepted Answer

Renders the element or component once and never re-renders it on future updates

Answer

v-once makes Vue skip the element and all its children during future re-renders, treating the initial render as static content.

Question 2

What is the purpose of the key attribute when using v-for in Vue?

Accepted Answer

To give each item a unique identity so Vue can efficiently reuse and reorder DOM nodes

Answer

The key attribute helps Vue's virtual DOM diffing algorithm identify which items have changed, been added, or removed, enabling efficient patch operations.

Question 3

How does <KeepAlive> improve performance in Vue applications?

Accepted Answer

It caches inactive component instances so they do not need to be re-created when switched back to

Answer

<KeepAlive> wraps dynamic components to preserve their state and DOM in memory instead of destroying and recreating them on each toggle.

Question 4

What is the purpose of the v-memo directive introduced in Vue 3.2?

Accepted Answer

Skips re-rendering a sub-tree when a specified array of dependencies has not changed

Answer

v-memo accepts a dependency array and only re-renders that element/component tree when one of the listed values changes, similar to React.memo.

Question 5

What does shallowRef() do to improve performance compared to ref()?

Accepted Answer

It makes the ref reactive only at the top level, skipping deep reactivity for nested objects

Answer

shallowRef() wraps a value in a ref but does not convert nested objects to reactive proxies, reducing overhead for large objects that are replaced entirely.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Vue JS Performance Optimization