vue3 相关技术文章

php mysql shell go vue css api接口对接支付接口对接

onUpdated 的四个坑：一次渲染只触发一次、父钩子晚于子钩子、改状态成环、SSR 不执行

onUpdated 的四个坑：一次渲染只触发一次、父钩子晚于子钩子、改状态成环、SSR 不执行
2026-10-31 00:05:37
Vue 3 的 onUpdated 对齐的是渲染轮次，不是 ref 赋值次数：多个状态变更合并成一轮、只改子组件内部状态时父钩子根本不跑、写回被模板读取的状态会成环、SSR 首屏完全不触发。按官方文档给出 nextTick、watch flush:post、onBeforeUpdate 的替代判据。
onUpdated Vue3 Vue 生命周期钩子

SSR 串号不一定是缓存：模块顶层 ref 加 app.provide，会让 Nuxt 的每个请求共用同一份状态

SSR 串号不一定是缓存：模块顶层 ref 加 app.provide，会让 Nuxt 的每个请求共用同一份状态
2026-10-30 00:06:00
SSR 里出现「A 用户看到 B 的数据」、刷新后状态残留、RSS 随请求上涨，常见成因是把 ref/reactive 写在模块顶层再 app.provide 出去：Node 是常驻进程，模块只求值一次，provide 的却是同一个引用。给出症状分型、grep 排查命令、useState 带 key 的正确写法、await 后 Nuxt instance is unavailable 的边界，以及跨请求缓存该用 Nitro storage / cachedFunction 而不是共享 ref。
inject provide Nuxt SSR useState Vue3 状态管理

provide 了还报 injection "x" not found：inject 的六个失效点按概率排

provide 了还报 injection "x" not found：inject 的六个失效点按概率排
2026-10-30 00:04:55
inject 拿不到值、拿到不更新、类型是 unknown，多数不是响应式坏了，而是提供方式或调用位置不对。按概率排一遍排查顺序：无祖先 provider 与默认值写法、reactive(ref) 与 .value 断链、inject 从 @vue/runtime-core 导入、setup 外异步调用、Symbol key 与 InjectionKey、测试里 global.provide，并给出 provide/inject 与 Pinia 的取舍标准。
inject provide Vue3 依赖注入 InjectionKey hasInjectionContext 前端

把 Vue 2 老项目搬上 Vue 3：@vue/compat 迁移层、Vite 白屏与 7 步上线顺序

把 Vue 2 老项目搬上 Vue 3：@vue/compat 迁移层、Vite 白屏与 7 步上线顺序
2026-10-25 00:04:22
Vue 2 已于 2023-12-31 EOL，真正拖时间的是插件生态与工具链。本文给出「Vue 2 语法 + Vue 3 引擎」的最小可交付目标，拆解 @vue/compat 迁移构建、Vite 下 alias 导致白屏的修法，以及 filters、$listeners、slot-scope、Vue.set、事件总线等六类移除 API 的分型对照，最后是一套可回滚的 7 步升级顺序。
前端升级 Vue Vue3 迁移前端工程

自动导入组件的代价：unplugin-vue-components 的配置项与三个典型故障

自动导入组件的代价：unplugin-vue-components 的配置项与三个典型故障
2026-10-22 21:31:25
unplugin-vue-components 让模板里直接写组件名、不用 import 和注册，但真正的坑在配置面：globs 一写 dirs 就失效、components.d.ts 生成了却忘加进 tsconfig 的 include、组件名冲突被自动导入覆盖、懒加载路由下共享组件被重复打进多个 chunk。逐项给出配置写法与排查顺序，并说明哪些项目不该用。
Vue3 Vite 自动导入工程化 TypeScript

Vue 3 里 1 万个输入框的更新耗时：拆分组件前后的对照实测

Vue 3 里 1 万个输入框的更新耗时：拆分组件前后的对照实测
2026-10-22 21:31:03
用一个 1 万字段的表单做对照：单组件里改一个输入框会触发整组件的全量 patch，把字段拆成子组件、用 provide/inject 传数据后，父组件完全不重渲染。文中给出两份可直接跑的组件代码、计时方式，以及这套拆法的代价（隐式依赖、实例变多、类型要自己约束）和不该拆的场景。
Vue3 性能优化 provide inject 组件粒度 onUpdated

VueUse v15 升级笔记：templateRef 被删、timer 换成 scheduler，还有 6 处会改行为的变更

VueUse v15 升级笔记：templateRef 被删、timer 换成 scheduler，还有 6 处会改行为的变更
2026-10-20 00:04:32
面向已在生产使用 Vue 3 + VueUse 的项目：v15 要求 Vue 3.5、Node 22，templateRef 移除改用 useTemplateRef，timer 选项统一为 scheduler，useThrottleFn 的 trailing 默认改为 true，useEventSource 的 message 事件与 useIDBKeyval 跨标签页同步都会改变现有行为。逐项给出改法与回归顺序。
VueUse Vue3 组合式函数前端升级

写给别人复用的 composable：VueUse 官方指南里的 9 条约定与 5 处取舍

写给别人复用的 composable：VueUse 官方指南里的 9 条约定与 5 处取舍
2026-10-17 00:04:14
面向「要写给别人复用的 composable」的库作者：整理 VueUse 官方指南的通用约定，并逐条说明理由——包大对象用 shallowRef、全局变量走 configurableWindow、内部 watch 透传选项、controls 选项让简单用法保持简单、新 Web API 输出 isSupported、异步函数返回 PromiseLike 以配合 Suspense、无渲染组件包装规范，附适用边界与代码。
Composables Vue3 组合式函数 VueUse 前端 TypeScript

Vue3 Composables 的四种设计模式：状态封装、异步请求、副作用与组合

Vue3 Composables 的四种设计模式：状态封装、异步请求、副作用与组合
2026-10-15 21:31:41
同一个 onMounted+ref+watch 片段在第三个页面重复出现，就该抽 composable 了。本文把 Vue 3 组合式函数收敛成四种模式：状态封装（readonly 包装返回）、异步请求（MaybeRefOrGetter 自动重请求）、副作用管理（清理用 onScopeDispose 而非 onUnmounted）、组合复用，并给出粒度权衡、三个易踩坑与目录分层/测试方法。
Vue3 Composables 组合式函数前端 TypeScript

Vue Flow：Vue 3 流程图组件的安装、数据结构与样式导入坑

Vue Flow：Vue 3 流程图组件的安装、数据结构与样式导入坑
2026-10-15 21:31:37
Vue Flow 是面向 Vue 3 的流程图/节点编辑器组件，基于 React Flow 与 D3.js 实现缩放平移。本文给出安装、nodes/edges 数据结构、Quickstart 代码，并说明样式必须单独导入且不能用 scoped 这个高频坑，以及 Background/MiniMap/Controls 附加组件与本地开发命令。
Vue Vue3 流程图组件库 TypeScript

OpsFlash v0.4.1：修掉 SSH 非交互命令不结束、流式收尾死锁与 CMD 多行校验误伤

OpsFlash v0.4.1：修掉 SSH 非交互命令不结束、流式收尾死锁与 CMD 多行校验误伤
2026-10-06 20:02:27
开源运维工具 OpsFlash 的 v0.4.1 更新，三个 SSH 坑：后台进程占着 PTY 时 sshd 不发 EOF 导致 Wait() 永久阻塞、x/crypto/ssh 不关 stdout writer 造成流式收尾死锁、CMD 多行脚本校验误伤交互式与守护进程模式。
Go SSH 运维工具 Wails Vue3 死锁管道超时

vue-data-ui：一个包装了 69 个 Vue 数据可视化组件，配置驱动 + 9 套主题

vue-data-ui：一个包装了 69 个 Vue 数据可视化组件，配置驱动 + 9 套主题
2026-10-01 21:31:03
vue-data-ui 是 Vue 3 数据可视化组件库，内含 69 个组件，覆盖常规图表、迷你图、3D、表格、地图、评分、工具类。组件由 config + dataset 两个 prop 驱动，支持 9 套主题、自定义 tooltip、多类 slot、PDF/图片导出水印与 Nuxt boilerplate。文章给出安装与按需引入、通用组件 VueDataUi、v2→v3 迁移注意点，以及适合与不适合的场景判断。
Vue3 数据可视化组件库图表主题

shallowRef、markRaw 与 Suspense：Vue 3 里哪些 API 只该用在边界上

shallowRef、markRaw 与 Suspense：Vue 3 里哪些 API 只该用在边界上
2026-09-24 21:30:49
Vue 3 的浅层响应式与逃生舱 API 不是性能开关。本文按边界逐个说明 shallowRef、shallowReactive、readonly、toRaw、markRaw、customRef 的适用位置与坑，并给出 Teleport、异步组件、KeepAlive、Suspense 的取舍：Suspense 至今仍是实验性，性能和可维护性该以测量为准而非猜测。
Vue Vue3 响应式 Composition API 前端 RAW

Varlet：70+ 组件的 Vue3 移动端组件库，用 touch-emulator 跑到桌面

Varlet：70+ 组件的 Vue3 移动端组件库，用 touch-emulator 跑到桌面
2026-09-24 21:30:49
Varlet 是 varletjs 维护的 Vue3 组件库，基于 Material Design 2/3，面向移动端并可借 @varlet/touch-emulator 在桌面运行，提供 70+ 组件、按需引入、主题定制、SSR/Nuxt 与 90%+ 单测覆盖。给出项目地址、CDN 与 Vite 安装方式及官方生态清单。
Vue Vue3 组件库 Material Design 移动端桌面端国际化

TinyRobot v0.4.1：Vue 3 的 AI 对话组件库，三个包哪些必装、哪些先别装

TinyRobot v0.4.1：Vue 3 的 AI 对话组件库，三个包哪些必装、哪些先别装
2026-09-17 21:30:58
TinyRobot 是 OpenTiny 面向 Vue 3 的 AI 对话组件库（v0.4.1，MIT）。本文拆开它的 Monorepo 三包：核心组件库、kit（Composable 与 Provider）、SVG 图标库，说明 useMessage/useConversation 如何接管消息状态、responseProvider 如何让换模型不重构前端，并给出「什么时候只装核心包、什么时候才需要 kit」的判断标准。
Vue3 TinyRobot AI对话组件库 OpenTiny Composable

Golang 重写 BuildAdmin：可视化拖拽生成 CRUD，有数据的表不删表重建

Golang 重写 BuildAdmin：可视化拖拽生成 CRUD，有数据的表不删表重建
2026-09-12 20:00:41
BuildAdmin 的 Go 移植版 ai-go-admin：Golang+Vue3+PostgreSQL 技术栈，图形化拖拽生成后台增删改查代码，一次生成模型/仓储/服务/控制器/路由/前端组件/语言包，有数据的表只给改表 SQL、不删表重建。含仓库、文档与在线演示地址。
Go Vue3 BuildAdmin CRUD 开源后台

Reka UI：给 Vue 用的无样式无障碍组件库，从安装到写一个 Popover

Reka UI：给 Vue 用的无样式无障碍组件库，从安装到写一个 Popover
2026-09-10 21:31:33
Reka UI 是 Radix Vue 在 v2 的新身份，一个给 Vue 用的低层级、无样式、无障碍优先组件库。本文介绍它的设计原则、安装方式、用 Popover 走一遍上手流程，并说明什么项目适合用它、什么项目不必引入。
Vue3 组件库 headless 无障碍开源项目

keep-alive 的 include 传了路由 name：Vue3 动态路由生产环境白屏排查

keep-alive 的 include 传了路由 name：Vue3 动态路由生产环境白屏排查
2026-09-10 21:31:29
Vue3 动态路由项目本地正常、生产白屏且控制台无报错，根因是 keep-alive 的 include 匹配的是组件 name 而非路由 name，异步组件下匹配失败直接阻断渲染。本文给出排查链路、根因分析和最小改动方案。
Vue3 Vue Router keep-alive 动态路由前端排障

用Qoder实战Vue3大屏：从项目分析到Agent团队协作的完整开发流程

用Qoder实战Vue3大屏：从项目分析到Agent团队协作的完整开发流程
2026-09-05 19:07:17
以一个基于 Vue3 + Konva.js 的 IoT 数据大屏可视化编辑器为实战案例，完整记录阿里 Qoder AI 编程工具的使用流程：项目分析、Better Harness 环境检查、/goal 目标驱动、/loop 动态循环监控、Agent Teams 专家团分工，以及延伸到知识库和科研场景。
Qoder AI编程 Vue3 Agent开发 Better Harness 联调

element-pro-components：给 Element Plus 中后台页面用的 Pro 组件库

element-pro-components：给 Element Plus 中后台页面用的 Pro 组件库
2026-09-03 21:33:02
一个基于 Element Plus 封装的 Vue3 Pro 层组件库 element-pro-components：含 Crud/Form/Table/Search/Layout/FilterRoutes/ColumnSetting 等中后台常用组合，给出安装、全局注册与配套 admin 模板链接。
Vue3 Element Plus 组件库中后台开源工具

Vue3 SPA 首屏优化记录：5 步把 LCP 从 3.2s 压到 1.2s

Vue3 SPA 首屏优化记录：5 步把 LCP 从 3.2s 压到 1.2s
2026-09-03 21:31:48
一个 PDF 工具箱站的真实首屏优化复盘：Vite manualChunks 按库拆包、modulePreload 过滤、路由懒加载、字体 font-display:swap、Playwright 预渲染 5 个手段，把 LCP 从 3.2s 压到 1.2s，并给出每个手段的坑点与取舍。
Vue3 Vite 性能优化首屏加载 LCP

用 WebRTC 自建远程桌面：拆解 billd-desk 的架构与它修不掉的两个问题

用 WebRTC 自建远程桌面：拆解 billd-desk 的架构与它修不掉的两个问题
2026-08-27 16:33:03
拆解开源远程桌面项目 billd-desk：从屏幕采集、WebCodecs 编码、WebRTC 传输到 DataChannel 输入回流的完整链路，以及作者承认的「权限、控制」两个架构级问题的成因。最后给出判断：什么场景适合用 WebRTC 自建远程桌面，什么场景不该碰。
WebRTC 远程桌面 Vue3 架构 Electron 向日葵

TabTab：一款高颜值、可开箱即用的 Vue3 后端管理模板

TabTab：一款高颜值、可开箱即用的 Vue3 后端管理模板
2026-08-26 12:56:46
TabTab 是一款基于 Vue3 + TypeScript + shadcn-vue 构建的高颜值开源后端管理模板，采用 Monorepo 架构，内置 5 种布局模式、明暗主题切换、中英文国际化、多标签页管理、全局页面搜索、响应式设计、Toast 通知、Pinia 状态管理与可定制组件库，支持桌面与移动端，适合外包接单开发者、SaaS 创业团队及企业内部工具开发者快速搭建个性化中后台系统。
Vue3 后台管理模板开源项目

从 VNode diff 到零虚函数：Vue 3.6 Vapor Mode 编译原理深度剖析，alien-signals push-pull 模型与 Solid 正面交锋

从 VNode diff 到零虚函数：Vue 3.6 Vapor Mode 编译原理深度剖析，alien-signals push-pull 模型与 Solid 正面交锋
2026-08-01 08:46:20
Vue 3.6 Vapor Mode 如何通过编译时优化消除虚拟 DOM 开销？本文深度剖析 alien-signals push-pull 响应式内核、编译依赖分析、DOM 操作代码生成，以及性能对比数据，附生产踩坑清单。
Vue Vapor Mode alien-signals 虚拟DOM 前端框架编译优化响应式性能优化 Solid Vue3

大家都在搜索什么？

devops 易支付一个官网+多少钱统一接受回调统一回调 python sub node 宝塔日志 mysql shell ElasticSearch css vue api接口对接 2025 支付接口对接 go php php回调