组件化最佳实践

一个现代化的、健壮的 App.vue 基本上就是由这四大金刚组成的：

#howto #evergreen #component-patterns

[!info] related notes

组件化最佳实践

模式

一个现代化的、健壮的 App.vue 基本上就是由这四大金刚组成的：

视图层 (router-view)
全局通知/确认系统 (Toaster, GlobalConfirmDialog)
全局辅助交互 (GlobalCommandPalette, GlobalSheet)
兜底系统 (GlobalErrorBoundary)

为什么

因为在过去的几年里，整个前端工程界都意识到了一件事：完全的“声明式（Declarative）”在处理全局覆盖物（Overlays）时，体验非常糟糕。

如果我们用纯纯的“声明式”写一个删除确认框：

<Modal :isOpen="isDeletingUser" @close="isDeletingUser = false">
  确定删除用户吗？
  <button @click="confirmDeleteUser">确定</button>
</Modal>
<Modal :isOpen="isDeletingPost" @close="isDeletingPost = false">
  确定删除文章吗？
  <button @click="confirmDeletePost">确定</button>
</Modal>

这种代码写多了，组件里会充满无数个毫无意义的 isOpen 变量。

所以，现代前端（无论 React 还是 Vue）达成了一个共识架构：

页面内容、复杂表单：依然严格使用声明式（写在 JSX 或 Template 里）。
全局通知、确认框、纯功能性弹窗：转向命令式（封装成 toast(), confirm() 这样的纯 JS 函数调用）。