v3.6.0-rc.1
Breaking Changes📦 vueView on GitHub →
⚠ 5 breaking✨ 6 features🐛 13 fixes🔧 6 symbols
Summary
Vue 3.6 RC introduces Vapor Mode, a new opt-in compilation mode for SFCs that significantly improves performance and reduces bundle size by refactoring the reactivity system. This release also includes numerous bug fixes, particularly within the Vapor Mode runtime.
⚠️ Breaking Changes
- In Vapor Mode, `getCurrentInstance()` now returns `null`. Developers should avoid relying on this in Vapor components.
- Component template refs in Vapor Mode do not expose properties like `$el`, `$props`, `$attrs`, `$slots`, and `$refs`. Accessing these will not work as expected.
- Options API is not supported in Vapor Mode. Use `<script setup>` or `<script setup vapor>` instead.
- Calling `slots.default()` in Vapor Mode is no longer a safe dry run. It executes slot rendering logic, which can have side effects like creating DOM nodes and registering reactive effects. Avoid calling slots to inspect their output before rendering.
- Custom directives in Vapor Mode have a new interface. The `value` argument is now a reactive getter.
Migration Steps
- To opt into Vapor Mode, add the `vapor` attribute to your `<script setup>` or `<script>` tag (e.g., `<script setup vapor>`).
- For template-only SFCs, add the `vapor` attribute to the `<template>` tag (e.g., `<template vapor>`).
- If creating a pure Vapor application, use `createVaporApp(App).mount('#app')` instead of `createApp()`.
- To use Vapor components within a VDOM app, install the `vaporInteropPlugin`: `createApp(App).use(vaporInteropPlugin).mount('#app')`.
- Avoid using `getCurrentInstance()` within Vapor components.
- Do not rely on component template refs exposing `$el`, `$props`, `$attrs`, `$slots`, or `$refs` in Vapor Mode.
- Refactor any code that uses the Options API in components intended for Vapor Mode to use `<script setup>`.
- Avoid calling slot functions like `slots.default()` for inspection purposes in Vapor Mode. Let the template handle slot rendering.
- Update custom directive implementations to use the new Vapor directive interface.
✨ New Features
- Vue 3.6 RC introduces Vapor Mode, a new compilation mode for SFCs aimed at reducing bundle size and improving performance.
- Vapor Mode is opt-in and supports a subset of Vue APIs with mostly identical behavior.
- Vapor Mode supports template-only SFCs and SFCs using `<script setup>`.
- New function `createVaporApp()` for creating pure Vapor applications.
- Introduced `vaporInteropPlugin` to enable VDOM interop with Vapor components.
- Vapor Mode significantly improves reactivity system performance and memory usage due to a refactor based on alien-signals.
🐛 Bug Fixes
- Fixed hydration issue: avoided resolving inherited fallback in forwarded slots.
- Fixed hydration issue: removed adopted SSR DOM for unresolved async setup.
- Fixed runtime-vapor issue: avoided patching invalid VNode slot content.
- Fixed runtime-vapor issue: cleaned up detached slot branches.
- Fixed runtime-vapor issue: deferred slot content anchors during hydration.
- Fixed runtime-vapor issue: preserved outer pending slot anchors.
- Fixed runtime-vapor issue: preserved slot content anchors during mismatch recovery.
- Fixed runtime-vapor issue: preserved v-show transition on vdom child.
- Fixed runtime-vapor issue: preserved vapor slot owner during interop slot dry run.
- Fixed runtime-vapor issue: preserved VNode anchors in dynamic component hydration.
- Fixed runtime-vapor issue: removed unsafe slot dry runs from vdom interop.
- Fixed runtime-vapor issue: reused hydration anchor candidates.
- Fixed vapor issue: handled v-if and v-show on transition roots.