背景 这类问题在真实项目里很常见：高并发、复杂依赖、发布频繁、团队协作面广。只有把边界条件提前定义清楚，系统才会在压力下保持稳定。 实践要点 先定义目标：可用性、延迟、成本哪个优先。 把关键路径显式化：超时、重试、降级、回滚。 把策略写进代码和流程，而不是只停留在文档。 代码片段 const state = reactive({ loading: false }) 总结 工程实践最怕“看起来正确”。把策略做成可观测、可验证、可回滚的闭环，才能在生产环境里真正稳定运行。 稳定性不是某个技巧，而是持续的系统化约束。
背景 这类问题在真实项目里很常见：高并发、复杂依赖、发布频繁、团队协作面广。只有把边界条件提前定义清楚，系统才会在压力下保持稳定。 实践要点 先定义目标：可用性、延迟、成本哪个优先。 把关键路径显式化：超时、重试、降级、回滚。 把策略写进代码和流程，而不是只停留在文档。 代码片段 const state = reactive({ loading: false }) 总结 工程实践最怕“看起来正确”。把策略做成可观测、可验证、可回滚的闭环，才能在生产环境里真正稳定运行。 稳定性不是某个技巧，而是持续的系统化约束。
背景 这类问题在真实项目里很常见：高并发、复杂依赖、发布频繁、团队协作面广。只有把边界条件提前定义清楚，系统才会在压力下保持稳定。 实践要点 先定义目标：可用性、延迟、成本哪个优先。 把关键路径显式化：超时、重试、降级、回滚。 把策略写进代码和流程，而不是只停留在文档。 代码片段 const state = reactive({ loading: false }) 总结 工程实践最怕“看起来正确”。把策略做成可观测、可验证、可回滚的闭环，才能在生产环境里真正稳定运行。 稳定性不是某个技巧，而是持续的系统化约束。
背景 前端性能优化如果只看本地 Lighthouse，经常和真实线上体验有偏差。 最小落地 采集 LCP/INP/CLS 上报到日志或指标平台 按页面和地区分桶观察 import { onLCP, onCLS, onINP } from 'web-vitals' onLCP(metric => report(metric)) onCLS(metric => report(metric)) onINP(metric => report(metric)) 总结 性能优化要闭环：采集真实数据 -> 定位问题 -> 验证回归。 没有真实用户数据，优化很容易变成自我感动。
背景 很多后台系统首屏不慢，但页面切换时常有明显等待。通常是路由组件和数据都在点击后才加载。 实用做法 鼠标悬停时预取路由 chunk 关键列表页预取首屏数据 低网速场景要可降级关闭 const UserPage = () => import('@/pages/UserPage.vue') function prefetchUserPage() { void UserPage() } 总结 预取策略要适度，目标是减少等待感，不是盲目预加载所有页面。 用户感知速度，很多时候来自“提前一步”。
背景 前端和 BFF 的协作常见问题： 字段命名不统一 可空语义不一致 线上响应结构和文档不一致 契约化思路 以 schema 为单一事实来源 前后端共享类型生成 关键接口做契约测试 export interface UserProfileDTO { id: string name: string email?: string roles: string[] } export async function fetchUserProfile(id: string): Promise<UserProfileDTO> { return http.get(`/api/users/${id}`) } 总结 契约稳定之后，联调成本会明显下降。 接口变更可追踪，线上兼容风险也更低。 协作效率的上限，通常由契约清晰度决定。
背景 后台系统里最难维护的页面之一，就是大表单： 字段多 联动多 校验规则多 草稿和提交逻辑分叉 如果状态设计不清晰，后期改一个字段就会牵动全局。 实用拆分 表单值与 UI 状态分离 同步校验与异步校验分离 页面状态按分区拆 composable const formValue = reactive({ name: '', email: '', company: '', }) const uiState = reactive({ submitting: false, dirty: false, activeTab: 'basic', }) 防止无效重渲染 大对象不要全量深监听 使用按字段 watch 拆分子组件隔离更新范围 watch( [() => formValue.email, () => formValue.company], () => { validateContactFields() } ) 总结 大表单的关键不是“怎么写更快”，而是“怎么改不炸”。 前期做好状态边界，后期迭代成本会低很多。 复杂页面最终拼的是可维护性，不是首版速度。
痛点 项目初期组件写得很快，半年后常见症状是： props 越加越多 事件命名混乱 业务逻辑散在模板与组件里 要解决这些问题，关键是建立稳定的组件边界。 用 defineProps 和 defineEmits 明确契约 const props = defineProps<{ modelValue: string disabled?: boolean }>() const emit = defineEmits<{ (e: "update:modelValue", val: string): void (e: "submit"): void }>() 契约清楚后，重构成本会明显降低。 分离容器组件与展示组件 容器组件负责数据获取、状态管理 展示组件只关心渲染和交互事件 这能避免“万能组件”不断膨胀。 组合式函数复用逻辑 export function usePagination() { const page = ref(1) const pageSize = ref(20) const setPage = (v: number) => (page.value = v) return { page, pageSize, setPage } } 把重复逻辑提炼到 composable，比 mixin 更直观也更可控。 结语 Vue3 + TS 的上限很高，但前提是组件契约、职责边界、逻辑复用这三件事先做好。代码会更稳，也更容易协作。
背景 前端性能这件事，经常有两个极端： 一种是完全不管，页面卡了再说 另一种是上来就讲虚拟列表、SSR、代码分割，结果项目里真正拖慢页面的点根本不在那 Vue3 本身已经做了不少优化，但框架快，不代表业务代码就一定快。 真正影响体验的，通常还是这些问题： 不必要的响应式开销 大列表重复渲染 首屏加载资源过大 watch 写得太随意，副作用失控 这篇文章只聊实战里最常见、最值回票价的优化点。 先判断瓶颈在哪 优化前先确认问题类型。通常分三类： 首屏慢 JS 包太大、资源太多、接口太慢。 交互卡 某个状态变更引起大面积重渲染。 长列表卡 DOM 数量过多，滚动和 patch 开销都很高。 这三类问题的解决手段完全不同。不要把“页面卡”都归因到 Vue 响应式。 不要把所有东西都塞进 reactive 很多项目里常见这种写法： const state = reactive({ tableData: [], chartInstance: null, editor: null, wsConnection: null, filters: { keyword: '', status: 'all', }, }) 看起来统一，实际上问题不少。 像图表实例、编辑器对象、WebSocket 连接这种第三方对象，本来就不是拿来做细粒度响应式追踪的。把它们塞进深层响应式对象里，只会增加代理成本，还可能带来奇怪副作用。 更合理的拆法是： import { reactive, shallowRef, markRaw } from 'vue' const filters = reactive({ keyword: '', status: 'all', }) const tableData = shallowRef<User[]>([]) const chartInstance = shallowRef<any>(null) const editor = shallowRef<any>(null) function initChart(el: HTMLDivElement) { chartInstance.value = markRaw(createChart(el)) } 这里的思路很明确： 业务表单状态，用 reactive 大数组、外部实例，用 shallowRef 不希望被代理的对象，用 markRaw 这不是“写法偏好”，而是直接影响更新成本。 ...
背景 Vue3 发布两年多了，从 Options API 迁移到 Composition API 的项目也有了不少。这里总结一些实战经验。 为什么需要 Composition API Options API 的问题：逻辑关注点分散在一个组件的各个选项里（data、methods、computed、watch…）。 // Options API - 逻辑分散 export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, computed: { doubled() { return this.count * 2 } }, watch: { count(newVal) { console.log('count changed:', newVal) } } } <!-- Composition API - 逻辑内聚 --> <script setup> import { ref, computed, watch } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) const increment = () => count.value++ watch(count, (newVal) => { console.log('count changed:', newVal) }) </script> 实用技巧 1. ref vs reactive 该用哪个？ // primitive types (String, Number, Boolean) -> ref const name = ref('BvBeJ') const age = ref(18) // objects/arrays -> reactive const user = reactive({ name: 'BvBeJ', skills: ['Go', 'Rust', 'C++'] }) // 或者对象也用 ref，通过 .value 访问 const user = ref({ name: 'BvBeJ' }) user.value.name = 'New Name' // 需要 .value 我的习惯： 简单类型用 ref，复杂对象用 reactive。TypeScript 类型推导更清晰。 ...