vue，保持组件小巧，单一职责

在 Vue 里，原则就是：

大组件拆分：避免一个页面文件里堆满逻辑和 UI。比如原本 UserProfile.vue 里既有用户头部、统计信息、最近活动，就显得过于臃肿。

小组件聚合：每个小组件负责一件事（单一职责），然后在父组件里组合成完整功能。

<template>
  <UserHeader :user="user" />
  <UserStats :statistics="userStats" />
  <RecentActivity :activities="recentActivities" />
</template>

UserHeader.vue

只负责展示用户头像、昵称、基本信息。

UserStats.vue

专注展示统计数据（关注数、粉丝数、发帖数等）。

RecentActivity.vue

专门负责渲染最近活动的列表。

父组件只做数据获取和分发，小组件只管展示。这样就符合 高内聚、低耦合 的设计思路。