vue-skilld

vue 3.6.0-beta.17 (vuejs/core)

3.6 系列的预发布 Beta 版。相比 3.5，两个主要变化：

• Vapor Mode：一种可选的 SFC 编译策略，可跳过 Virtual DOM；参见 Vapor Mode。
• alien-signals 响应式重构：@vue/reactivity 基于 alien-signals 重建，以降低内存占用并加快更新。没有公共 API 变更。

软件包信息（来自准备好的源代码）：

• 版本：package.json:3。
• 主入口重新导出 @vue/runtime-dom 和 @vue/runtime-vapor，因此所有 Vapor API（createVaporApp、vaporInteropPlugin、defineVaporComponent）都可以从普通的 vue 导入：dist/vue.d.ts:4-5。
• vue 软件包自身新增的具名导出：compile、defineVaporAsyncComponent、withAsyncContext：dist/vue.runtime.esm-bundler.js:12。
• 子路径导出：vue/server-renderer、vue/compiler-sfc、vue/jsx-runtime、vue/jsx：package.json:36-68。
• TypeScript 是可选的对等依赖项（*）：package.json:107-113。

常见任务

使用 <script setup>、响应式 props 解构和 defineModel 的组件：

<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const model = defineModel<string>({ default: '' })
</script>

<template>
  <input v-model="model" />
  <p>{{ count }}</p>
</template>

模板 refs（3.5+ 模式）：

import { useTemplateRef } from 'vue'
const input = useTemplateRef('my-input') // matches ref="my-input" in template

带清理函数的 Watch（3.5+）：

import { watch, onWatcherCleanup } from 'vue'
watch(id, () => {
  const controller = new AbortController()
  load(id.value, controller)
  onWatcherCleanup(() => controller.abort())
})

接受值、ref 或 getter 的组合式函数：

import { toValue, type MaybeRefOrGetter } from 'vue'
function useDouble(source: MaybeRefOrGetter<number>) {
  return computed(() => toValue(source) * 2)
}

SSR 的延迟 hydration（3.5+）：

import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const Heavy = defineAsyncComponent({
  loader: () => import('./Heavy.vue'),
  hydrate: hydrateOnVisible(),
})

会影响代码编写方式的版本规则

完整列表及引用请参见 API 变更。以下变更会导致旧代码无法使用：

• Reactivity Transform（$ref、$computed）已在 3.4 中移除。请使用普通的 ref/computed，或 Vue Macros 插件。
• 自 3.4 起，@vnodeXXX 监听器会导致编译错误。请使用 @vue:mounted 形式的监听器。
• 自 3.4 起，不再注册全局 JSX 命名空间。在 tsconfig 中设置 jsxImportSource: "vue"，或导入 vue/jsx。
• 在 Vapor 组件（3.6）中，Options API、app.config.globalProperties、getCurrentInstance()、v-memo 和 @vue:xxx 元素生命周期事件均无法使用。
• beta.17 默认启用 Vapor 事件委托：祖先元素中的 stopPropagation() 可能会取消委托处理程序。可通过 compilerOptions.eventDelegation 按构建禁用（在 beta.15 中新增，#14924）。注意：rc.2 将其替换为可选的 .delegate 修饰符（发布说明）。

打包工具和 dist 说明

• 打包工具会解析仅含运行时的构建版本；.vue 文件中的模板会预编译。若要进行运行时模板编译（DOM 内模板或模板字符串），请将 vue 别名指向 vue/dist/vue.esm-bundler.js。
• 在构建时替换 __VUE_OPTIONS_API__、__VUE_PROD_DEVTOOLS__、__VUE_PROD_HYDRATION_MISMATCH_DETAILS__，以正确进行 tree-shaking（编译时标志）。
• 在 Node CJS 中，如果能够解析到 TypeScript，导入 vue/compiler-sfc 会通过 registerTS(() => require('typescript')) 自动注册 TypeScript：compiler-sfc/register-ts.js:1-3。

详情、dist 文件选择及导出目录请参见：API 概览。

参考资料

• API 概览：入口点、dist 构建版本、功能标志、导出目录。
• Vapor Mode：可选启用、互操作、限制、指令、事件委托。
• API 变更 3.4 至 3.6：各版本新增、稳定和移除的 API，附有引用。
• 最佳实践：经官方文档验证的组合式函数和性能模式。