前端相关技术文章

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

写给别人复用的 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

ICU MessageFormat 落地笔记：六个 CLDR 复数类别、`=N` 优先级与 MF2 技术预览（ICU 75.1）

ICU MessageFormat 落地笔记：六个 CLDR 复数类别、`=N` 优先级与 MF2 技术预览（ICU 75.1）
2026-10-16 00:03:52
讲清 ICU MessageFormat 的工程细节：六个 CLDR 复数类别、other 必填与 =N 精确匹配的优先级、select/plural 嵌套顺序、花括号转义、skeleton 为何优于 string pattern，以及 MF2 在 ICU 75.1 的技术预览状态和 FormatJS/messageformat 两个实现库。
i18n 国际化 ICU MessageFormat CLDR 前端

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

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

Inertia.js 3.9：后台标签页轮询可暂停，退出登录后 Back 键不再翻出缓存里的受保护页面

Inertia.js 3.9：后台标签页轮询可暂停，退出登录后 Back 键不再翻出缓存里的受保护页面
2026-10-15 21:03:21
Inertia.js v3.9 给 usePoll/router.poll 加了 background 选项，可让隐藏标签页的轮询暂停或继续，替代已弃用的 keepAlive；同时 clearHistory 会一并清空 prefetch 缓存，修掉退出登录后按 Back 翻出缓存受保护页面的问题，并说明这是本地展示边界而非鉴权绕过。
Inertia.js Vue 前端 Laravel

Vue Router v5.4.0：预构建 matcher、滚动恢复 API 落地，实验特性下 query 一律归一为数组

Vue Router v5.4.0：预构建 matcher、滚动恢复 API 落地，实验特性下 query 一律归一为数组
2026-10-14 21:31:49
Vue Router v5.4.0（2026-10-07）发布：createRouter 支持传入预构建 matcher，新增 useScrollRestoration 与 onRouteRendered 两个官方 API，并带来一批 hash 参数实验特性（definePage 提取 hash、必填/默认 hash 参数、不再解码 hash）。实验模式下 query 值被统一归一化为数组，属破坏性变更。附完整特性/修复清单与升级建议。
Vue Router 路由 TypeScript 前端

localStorage 没有 5MB 保证：Web Storage 的隔离规则、配额失败与选型

localStorage 没有 5MB 保证：Web Storage 的隔离规则、配额失败与选型
2026-10-08 00:04:05
从前端常见的存储误用切入，讲清 Web Storage 的隔离规则（协议也参与）、配额不是固定 5MB 及各种失败表现，并给出 localStorage / sessionStorage / Cookie 的选型对照与能力探测、跨标签页同步代码。
WebStorage localStorage sessionStorage 浏览器存储前端浏览器端

Vue 3.6 Vapor 默认不再做事件委托：监听器直接绑元素，要委托得写 .delegate

Vue 3.6 Vapor 默认不再做事件委托：监听器直接绑元素，要委托得写 .delegate
2026-10-04 21:02:38
Vue 3.6 从 rc.2 起，Vapor 组件默认把 DOM 监听器直接绑到元素，不再做 document 级事件委托；需要委托得写 Vapor 专用的 .delegate 修饰符。本文讲清这一改动的取舍、对既有代码的影响，以及 Vapor 的 Opt-in 写法、Options API 不支持、createVaporApp 与 vaporInteropPlugin 的边界。
Vue 前端 Vapor 事件成本 3.6

Vue 3.6 RC 的 Vapor Mode：100% opt-in，不支持 Options API 和 Suspense

Vue 3.6 RC 的 Vapor Mode：100% opt-in，不支持 Options API 和 Suspense
2026-10-02 21:01:28
Vue 3.6 进入 RC，Vapor Mode 特性集完成：100% opt-in 的无 VDOM 编译模式，只支持 script setup/template SFC，不支持 Options API，Suspense 在纯 Vapor 下不可用。本文给出 opt-in 写法、createVaporApp 与 vaporInteropPlugin 的取舍，以及 alien-signals 重构带来的响应式收益。
Vue 前端 Vapor Mode 响应式性能优化 3.6

88 列 × 651 行卡死 4 秒：Vue 表格从 57288 个单元格砍到 880 个

88 列 × 651 行卡死 4 秒：Vue 表格从 57288 个单元格砍到 880 个
2026-10-01 21:31:03
一个 Vue 2 数据统计页加载卡死 4 秒、主线程阻塞 5.5 秒。用 Chrome Performance Trace 定位到 510 万次条件判断与 O(n×m) 嵌套遍历，分算法、数据、架构、渲染四层优化：动态属性替换硬编码判断、Web Worker 分离重计算、Object.freeze 跳过响应式、Element UI 树形表格懒加载，首屏从 57288 个单元格降到 880 个，并记录了 Web Worker 三大传输陷阱与 el-table lazy 的三条铁律。
Vue Element UI Web Worker 性能优化前端滚动定时器

Tailwind CSS v4.2/v4.3 迁移：start-*/end-* 弃用改 inset-s-*，webpack 插件提速

Tailwind CSS v4.2/v4.3 迁移：start-*/end-* 弃用改 inset-s-*，webpack 插件提速
2026-09-28 21:02:47
Tailwind CSS v4.2 与 v4.3 的迁移笔记：四套新调色板、官方 @tailwindcss/webpack 插件提速 2 倍、逻辑属性工具与 start-*/end-* 弃用改为 inset-s-*/inset-e-*，以及 v4.3 的 scrollbar、@container-size、zoom-* 等工具，附类名对照与兼容性说明。
Tailwind CSS 前端构建迁移 tail

卡片在主栏和侧栏长得不一样：CSS 容器查询的用法与回退

卡片在主栏和侧栏长得不一样：CSS 容器查询的用法与回退
2026-09-26 00:03:30
同一个卡片组件放进主栏和侧栏表现不一致，是因为媒体查询只看视口。这篇讲 CSS 容器查询（@container）的用法与约束：containment 如何短路无限循环、container-type size/inline-size 的副作用、cq 长度单位、样式查询、以及 94% 覆盖率下用 ResizeObserver + @supports 做回退，附 Vue 组件示例。
container queries CSS 容器查询前端响应式布局 Vue

Vite 8.0 发布：Rolldown 成为唯一打包器，Linear 生产构建 46s 降到 6s

Vite 8.0 发布：Rolldown 成为唯一打包器，Linear 生产构建 46s 降到 6s
2026-09-25 21:02:18
Vite 8.0 把 esbuild+Rollup 双打包器统一为 Rust 写的 Rolldown，构建快 10-30 倍，Linear 生产构建从 46s 降到 6s。本文整理官方发布要点：插件兼容层、Node 20.19+/22.12+ 要求、安装体积增加约 15MB 的来源、plugin-react v6 去 Babel，以及大项目的两步渐进迁移路径。
Vite Rolldown 前端构建工具 Vue

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

Vue 3.6 RC 里的 Vapor Mode：在现有 VDOM 应用里局部启用，哪些 API 用不了

Vue 3.6 RC 里的 Vapor Mode：在现有 VDOM 应用里局部启用，哪些 API 用不了
2026-09-24 21:13:14
Vue 3.6 RC 的 Vapor Mode 编译期去掉 Virtual DOM，per-component 可选。讲清 <script setup vapor> 启用方式、createVaporApp 与 vaporInteropPlugin、VDOM 互操作的边界，以及 getCurrentInstance/v-memo/元素生命周期/全局属性等尚不支持的 API，附 3.6 的 alien-signals 响应式重构。
Vue 前端编译响应式 3.6

Vue3 响应式失效复盘：reactive 解构、数组整体替换与 watch/computed 的坑

Vue3 响应式失效复盘：reactive 解构、数组整体替换与 watch/computed 的坑
2026-09-23 21:02:57
响应式不更新多半不是 Vue 失效，而是撞上 Proxy 边界。文中梳理 reactive 解构丢响应、整体替换数组必须用 ref，computed 的惰性求值与禁止副作用（异步、改其他状态、访问 DOM），以及 watch 监听 reactive 时 oldValue===newValue、flush:'post' 取 DOM 等坑。
Vue 前端响应式排障惰性求值

Vue Vapor 事件机制实测：@click.stop 在混用传统组件时拦不住事件

Vue Vapor 事件机制实测：@click.stop 在混用传统组件时拦不住事件
2026-09-23 20:01:47
基于 vue@3.6.0-alpha.2 实测 Vapor 模式的事件机制：可冒泡事件进入 document 级委托，非冒泡事件与组件事件仍按传统方式。重点记录 @click.stop 的陷阱——混用传统 Vue 组件或直接 addEventListener 时，stop 无法阻止事件，传统组件的 stop 甚至会破坏委托链。
Vue Vapor 事件委托前端 D3

TypeScript 5.9：import defer 延迟模块求值，大项目编译快约 11%

TypeScript 5.9：import defer 延迟模块求值，大项目编译快约 11%
2026-09-20 21:02:41
TypeScript 5.9 带来 import defer 延迟模块求值（只能整模块命名空间导入）、稳定的 --module node20、精简的 tsc --init 默认；编译器缓存 mapper 实例化、优化文件检查，大项目约提速 11%。另有 ArrayBuffer 不再是 TypedArray 超类型的行为变更。
TypeScript 前端 JavaScript 编译优化

Vue 3.6.0-rc.1 进入 RC：Vapor Mode 功能集完成，编译期不再生成 VNode

Vue 3.6.0-rc.1 进入 RC：Vapor Mode 功能集完成，编译期不再生成 VNode
2026-09-19 21:02:11
Vue 3.6.0-rc.1 进入 RC，Vapor Mode 功能集完成：编译器直接输出命令式 DOM 操作，不再生成 VNode。整理开启方式（script setup vapor / createVaporApp / vaporInteropPlugin）、不支持哪些 API，以及第三方基准的挂载与内存数据。
Vue Vapor Mode 前端 3.6 6.0

Pinia 4.0 只做「技术上破坏性」变更：纯 ESM、删 CJS，devtools-api 要单独装

Pinia 4.0 只做「技术上破坏性」变更：纯 ESM、删 CJS，devtools-api 要单独装
2026-09-18 21:06:57
Pinia 4.0.0（2026-07-14）只做技术性破坏变更：包改为纯 ESM、删除 CJS 入口、提高最低 TypeScript 版本，@vue/devtools-api 升级到 v8 并需与 pinia 一起安装；同时用 Nostics 重构错误与开发警告。本文列出版本支持状态与升级检查清单。
Vue Pinia 前端 ESM 升级 Pin

Vue 3.6 进入 RC：Vapor Mode 特性完备，@vue/reactivity 换用 alien-signals

Vue 3.6 进入 RC：Vapor Mode 特性完备，@vue/reactivity 换用 alien-signals
2026-09-13 21:03:37
Vue 3.6 进入 RC：Vapor Mode 特性完备、100% opt-in，用 script setup vapor 开启，不支持 Options API、Suspense 只能在 VDOM 侧包裹；@vue/reactivity 底层改为 alien-signals 重构，性能与内存占用提升。含适用场景与当前 rc 状态说明。
Vue Vapor Mode 前端响应式构建

Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面

Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面
2026-09-12 09:55:55
Oil Motion 是 Agent 通用交互动画 Skill：先生成关键画面确认主体不漂移，再用 AI 视频填充中间过程，最后把视频转成帧序列映射到滚动、鼠标、拖动、触摸或设备方向；用户操作即时响应零延迟且每次结果一致，按场景自动选 WebP 图集/MP4/分片等资源格式，把 AI 创造力与程序确定性结合成主动响应的交互元素。
Oil Motion 交互动画 AI视频前端滚动动画

garden-skills 开源：25 种风格配方告别 AI 味界面，给编程助手装上审美插件

garden-skills 开源：25 种风格配方告别 AI 味界面，给编程助手装上审美插件
2026-09-12 09:52:29
garden-skills 是 ConardLi 开源的四合一 Agent 技能集合：web-design-engineer 内置 Linear、Aesop、Bloomberg、Stripe Press 等 25 种风格配方与六步设计流程，web-video-presentation 一键把文章变 16:9 网页演示支持 TTS 配音，另有 gpt-image-2 图像提示词引擎与 kb-retriever 本地知识库检索；每个技能都是含文档、脚本、素材的工程化单元，支持六大平台安装。
garden-skills AI设计技能集合 Claude Code 前端动效同质化

awesome-design-md：50+ 顶级品牌设计系统写成 Markdown，AI 写 UI 直接照抄大厂审美

awesome-design-md：50+ 顶级品牌设计系统写成 Markdown，AI 写 UI 直接照抄大厂审美
2026-09-12 09:50:28
awesome-design-md 由 VoltAgent 团队开源：基于 Google Stitch 提出的 DESIGN.md 概念，把 Claude、Apple、Spotify、Linear、Stripe 等 50+ 顶级品牌的视觉 DNA 反向工程成现成 Markdown 设计系统文档，丢进项目根目录即可让 AI 编码代理生成一致、高级的 UI，零安装复制即用。
awesome-design-md DESIGN.md AI UI 设计系统前端

Vue 3.6 Vapor Mode 进入 RC：给 script setup 加个 vapor 属性，哪些代码会踩坑

Vue 3.6 Vapor Mode 进入 RC：给 script setup 加个 vapor 属性，哪些代码会踩坑
2026-09-10 21:02:41
Vue 3.6 的 Vapor Mode 进入 RC，给 script setup 加 vapor 属性即可开启。本文讲清 createVaporApp 与 vaporInteropPlugin 两条路线的包体差异、哪些依赖 VNode 与公共实例代理的代码会不可用，并给出现阶段的适用场景与迁移注意点。
Vue 前端性能 VaporMode

大家都在搜索什么？

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