vue3bug收录

1. 组合式 API 中异步组件响应性丢失

现象 :在 setup() 内使用 await 异步加载组件后,部分响应式变量未正确触发更新。
临时方案 :用 shallowRef + markRaw 包裹异步组件:

javascript 复制代码
const AsyncComp = shallowRef(markRaw(defineAsyncComponent(() => import('...'))));

2. <script setup> 作用域下 v-model 自定义修饰符失效

场景 :在自定义组件中使用 v-model 时,通过 defineProps 接收的修饰符参数未正确传递。
修复参考 :显式声明 modelModifiers 类型:

typescript 复制代码
defineProps<{ modelModifiers?: { uppercase: boolean } }>();

3. Teleport 组件与 SSR 兼容性问题

表现 :在 Nuxt 等 SSR 框架中,<Teleport> 内容可能重复渲染或未正确挂载到目标节点。
规避措施:动态禁用 Teleport 的 SSR 功能:

html 复制代码
<Teleport :disabled="process.server" to="#target">

4. Suspense 边界捕获异步错误异常

问题 :嵌套的 <Suspense> 组件中,子组件的异步错误未被最外层 onErrorCaptured 捕获。
跟踪进展 :建议检查 Vue GitHub Issue #11879 的修复状态。


5. Reactive 对象解构后响应性断开

陷阱 :对 reactive({ ... }) 解构赋值时,新变量失去响应性:

javascript 复制代码
const state = reactive({ count: 0 });
const { count } = state; // 🚫 count 不再响应

正确实践 :始终通过 state.count 访问,或改用 toRefs 转换。

相关推荐
theMuseCatcher2 天前
Vue3导航菜单(Menu)
typescript·vue3·less
theMuseCatcher3 天前
Vue3评论(Comment)
typescript·vue3
RuoyiOffice4 天前
Vue3+Gantt:把任务排期、依赖关系和里程碑放进项目管理
项目管理·vue3·springboot·dhtmlx-gantt·wbs·gantt·ruoyi office
AI开源软件6 天前
SpringBoot3+Vue3 财务管理系统如何设计:从业务单据到总账的模块划分
spring boot·vue3·领域建模·会计凭证·ruoyi office·业财协同·财务系统设计
Nymph_Zhu11 天前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
Nymph_Zhu11 天前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
AI源码14 天前
巨峰影视影院
vue3
RuoyiOffice14 天前
UniApp企业办公:把审批、客户和项目装进手机,能做些什么?
spring boot·vue3·uniapp·crm·flowable·移动办公·企业应用
RuoyiOffice15 天前
SpringBoot OA推荐:面向信创选型,看看这套企业协同平台
spring boot·vue3·信创·flowable·企业协同·ruoyi office·oa选型
周厉15 天前
WebSocket 使用场景与实现方法:Java + Vue3 全栈实战
java·websocket·vue3·websocket双向通讯