Zum Inhalt springen
verdict:

Vue 3.6.0-rc.1

preview

Release Notes

note: die Zusammenfassung und die Release Notes sind auf Englisch

note: keine Zusammenfassung für dieses ältere Release

Wir fassen die neueren Releases zusammen. Die originalen Release Notes dieser Version stehen hier unten.

release-notesgithub.com/vuejs/core · 185 Zeilen
  1. Vue 3.6 is now entering the RC phase as we have completed the intended feature set for Vapor Mode.
  3. 3.6 also includes a major refactor of `@vue/reactivity` based on [alien-signals](https://github.com/stackblitz/alien-signals), which significantly improves the reactivity system's performance and memory usage.
  5. For more details about Vapor Mode, see the [About Vapor Mode](#about-vapor-mode) section later in this release note.
  9. ### Bug Fixes
  11. * **hydration:** avoid resolving inherited fallback in forwarded slots ([4c215b5](https://github.com/vuejs/core/commit/4c215b5bd293e18f3a4c62b627a7696016afb982))
  12. * **hydration:** remove adopted SSR DOM for unresolved async setup ([3859af4](https://github.com/vuejs/core/commit/3859af4066edeba647e886decb9b4737d7f371cc))
  13. * **runtime-vapor:** avoid patching invalid VNode slot content ([25f5a8a](https://github.com/vuejs/core/commit/25f5a8ae6ed3df9c4e3fbaed0da32ce0466c5612))
  14. * **runtime-vapor:** clean up detached slot branches ([b41009d](https://github.com/vuejs/core/commit/b41009d41b21c98174b214eebd271d456215d177))
  15. * **runtime-vapor:** defer slot content anchors during hydration ([9b9e4bd](https://github.com/vuejs/core/commit/9b9e4bd6efdbce7de258d27e88155bff657d6ae9))
  16. * **runtime-vapor:** preserve outer pending slot anchors ([4af4bf9](https://github.com/vuejs/core/commit/4af4bf92a46426631ed6323e542227855b2fc86f))
  17. * **runtime-vapor:** preserve slot content anchors during mismatch recovery ([26f90b5](https://github.com/vuejs/core/commit/26f90b58977ee84569b5599700dbe9e864c880a4))
  18. * **runtime-vapor:** preserve v-show transition on vdom child ([#15074](https://github.com/vuejs/core/issues/15074)) ([fe882c9](https://github.com/vuejs/core/commit/fe882c93bb3ec37772126de1cb5c646edb56ace4)), closes [#15073](https://github.com/vuejs/core/issues/15073)
  19. * **runtime-vapor:** preserve vapor slot owner during interop slot dry run ([#15031](https://github.com/vuejs/core/issues/15031)) ([340630e](https://github.com/vuejs/core/commit/340630ea37388e12f176a11cadcbdfe8e55e5912))
  20. * **runtime-vapor:** preserve VNode anchors in dynamic component hydration ([898e2ca](https://github.com/vuejs/core/commit/898e2ca2441ea3ac064f3b38db47a0aa1b7a556d))
  21. * **runtime-vapor:** remove unsafe slot dry runs from vdom interop ([#15089](https://github.com/vuejs/core/issues/15089)) ([3d42cdf](https://github.com/vuejs/core/commit/3d42cdf380b23da000de0ff9d6c3de5d77e0b0d1)), closes [#14793](https://github.com/vuejs/core/issues/14793)
  22. * **runtime-vapor:** reuse hydration anchor candidates ([06778e7](https://github.com/vuejs/core/commit/06778e705aa87e35f6058c575c562c355a365523))
  23. * **vapor:** handle v-if and v-show on transition roots ([#15069](https://github.com/vuejs/core/issues/15069)) ([8f62f2e](https://github.com/vuejs/core/commit/8f62f2e57519dcb80c9b3b42588c77ee6d2b0a2f)), closes [#15068](https://github.com/vuejs/core/issues/15068)
  26. ## About Vapor Mode
  28. Vapor Mode is a new compilation mode for Vue Single-File Components (SFCs) with the goal of reducing baseline bundle size and improving performance.
  30. It is 100% opt-in and supports a subset of existing Vue APIs with mostly identical behavior. Features that depend on VNodes or the component public instance proxy are not available in Vapor components.
  32. Vapor Mode has demonstrated the same level of performance as Solid and Svelte 5 in [third-party benchmarks](https://github.com/krausest/js-framework-benchmark).
  34. ### General Stability Notes
  36. Vapor Mode is feature-complete in Vue 3.6 RC. For now, we recommend using it in the following cases:
  38. - Partial usage in existing apps, such as implementing a performance-sensitive page in Vapor Mode.
  39. - Building small new apps entirely in Vapor Mode.
  41. ## Opting In to Vapor Mode
  43. Vapor Mode supports template-only SFCs and SFCs using `<script setup>`; the Options API is not supported. The following forms are supported:
  45. ```vue
  46. <script setup vapor>
  47. // ...
  48. </script>
  49. ```
  51. `<script vapor>` is shorthand for `<script setup vapor>`:
  53. ```vue
  54. <script vapor>
  55. // ...
  56. </script>
  57. ```
  59. The `vapor` marker can also be placed on the template, enabling Vapor compilation for the entire SFC:
  61. ```vue
  62. <template vapor>
  63. <!-- ... -->
  64. </template>
  65. ```
  67. ## Creating an App and Using VDOM Interop
  69. ### Pure Vapor Applications
  71. Applications composed entirely of Vapor components can use `createVaporApp()`:
  73. ```js
  74. import { createVaporApp } from 'vue'
  75. import App from './App.vue'
  77. createVaporApp(App).mount('#app')
  78. ```
  80. Apps created this way avoid pulling in the Virtual DOM runtime code and allow the baseline bundle size to be drastically reduced.
  82. ### Enabling VDOM Interop
  84. To use Vapor components in a VDOM app instance created via `createApp()`, the `vaporInteropPlugin` must be installed:
  86. ```js
  87. import { createApp, vaporInteropPlugin } from 'vue'
  88. import App from './App.vue'
  90. createApp(App).use(vaporInteropPlugin).mount('#app')
  91. ```
  93. A Vapor app instance can also install `vaporInteropPlugin` to allow VDOM components to be used inside, but this pulls in the VDOM runtime and offsets the benefits of a smaller bundle.
  95. Components authored with render functions or JSX remain VDOM components and also require interop when used in a Vapor application.
  97. When the interop plugin is installed, Vapor and non-Vapor components can be nested inside each other. This currently covers standard props, events, and slots usage, but does not yet account for all possible edge cases. For example, there may still be rough edges when using a VDOM-based component library in Vapor Mode.
  99. In general, we recommend having distinct regions in an app where one rendering mode or the other is used, and avoiding mixed nesting as much as possible.
  101. ## Feature Compatibility
  103. By design, Vapor Mode supports a subset of existing Vue features. For the supported subset, we aim to deliver the same behavior according to the API specifications. The following features are currently unsupported or do not apply to Vapor Mode:
  105. - Options API
  106. - `app.config.globalProperties`
  107. - `getCurrentInstance()` returns `null` in Vapor components
  108. - `@vue:xxx` per-element lifecycle events
  109. - `v-memo`
  110. - Component template refs do not expose properties such as `$el`, `$props`, `$attrs`, `$slots`, and `$refs`
  112. ## Important Usage Considerations
  114. ### Event Delegation and `stopPropagation()`
  116. Vapor delegates eligible events to `document`. Each element stores its own handler, and a single document listener walks the event path and invokes matching handlers.
  118. If any ancestor calls `stopPropagation()`, the event never reaches `document`, and the delegated handler will not run.
  120. The following forms bypass delegation and attach the listener directly to the element:
  122. ```vue
  123. <button @[event]="onClick" />
  124. <button v-bind="{ onClick }" />
  125. <button v-on="{ click: onClick }" />
  126. ```
  128. ### `slots.default()` Is Not a Safe Dry Run
  130. In Vapor, `slots.default()` is not a side-effect-free inspection API. Calling it executes the slot's rendering logic, which may create Blocks and DOM nodes, register reactive effects, and claim existing SSR DOM during hydration.
  132. Do not call a slot to inspect its output before deciding what else to render:
  134. ```vue
  135. <script setup vapor>
  136. import { useSlots } from 'vue'
  138. const slots = useSlots()
  139. const content = slots.default?.()
  140. const showFallback = !content
  141. </script>
  143. <template>
  144. <div v-if="showFallback">Fallback</div>
  145. </template>
  146. ```
  148. Instead, leave slot rendering to the template:
  150. ```vue
  151. <template>
  152. <slot />
  153. </template>
  154. ```
  156. ### Custom Directives Use a Different Interface
  158. Custom directives in Vapor also have a different interface:
  160. ```ts
  161. type VaporDirective = (
  162. node: Element | VaporComponentInstance,
  163. value?: () => any,
  164. argument?: string,
  165. modifiers?: DirectiveModifiers,
  166. ) => (() => void) | void
  167. ```
  169. `value` is a reactive getter that returns the binding value. Reactive effects can be set up using `watchEffect()` and are automatically released when the component unmounts. A directive may also return a cleanup function:
  171. ```ts
  172. const MyDirective = (el, source) => {
  173. watchEffect(() => {
  174. el.textContent = source()
  175. })
  176. return () => console.log('cleanup')
  177. }
  178. ```
  180. ## Behavior Consistency
  182. Vapor Mode attempts to match VDOM Mode behavior as much as possible, but minor inconsistencies may still exist in edge cases because the two rendering modes are fundamentally different. In general, a minor inconsistency is not considered a breaking change unless the behavior has previously been documented.
  184. For stable releases, please refer to [CHANGELOG.md](https://github.com/vuejs/core/blob/main/CHANGELOG.md) for details.
  185. For pre-releases, please refer to [CHANGELOG.md](https://github.com/vuejs/core/blob/minor/CHANGELOG.md) of the `minor` branch.

auf github ansehenimported 2026-09-28 über npm