Vue.js 3.1: What's New, Release History & EOL Status

What Is New in Vue.js 3.1

What new lifecycle hooks were introduced?

The main addition is the onServerPrefetch composition API hook. This lets you run async operations during SSR and have the results prefetched into the render context. It's the Composition API equivalent of the Options API's serverPrefetch hook.

In practice, this makes server-side data fetching in setup() much cleaner. You can now directly await async calls within onServerPrefetch during SSR, which simplifies the data flow between server and client.

How does the v-memo directive help performance?

v-memo is a new directive that provides manual control over template fragment caching. It accepts an array of dependency values and only re-renders the subtree when one of those values changes.

This matters because it can significantly optimize rendering performance for large v-for lists or complex components with expensive re-renders. It's particularly useful for virtual scrolling scenarios where you need fine-grained control over updates.

<div v-memo="[valueA, valueB]">
  {{ valueA }} {{ valueB }}
</div>

What are effect scopes and why do they matter?

The new effectScope API allows you to group multiple effects together and dispose of them collectively. This is primarily an advanced feature for library authors rather than everyday application code.

It solves the problem of manually managing cleanup for multiple computed properties and watchers. Instead of tracking each effect individually, you can create a scope and automatically dispose all contained effects when needed.

What compiler improvements were made?

The template compiler received several optimizations including faster compile times and reduced memory usage. These improvements are most noticeable in development mode and during hot module replacement.

The compiler also got better at handling edge cases with v-on and v-bind modifiers, making the parsing more robust. These changes help prevent unexpected behavior in complex template expressions.

How did TypeScript support improve?

TypeScript typing saw significant enhancements across the board. The types for async components, defineComponent, and component options were all refined for better type inference and accuracy.

These improvements mean you'll get more precise type checking when working with complex component patterns. The types now better handle edge cases that previously required manual type assertions.