组件是可复用的 UI 单元：把一块「结构 + 逻辑 + 样式」封装起来，对外暴露清晰的接口（props 进、事件出）。组件化的本质是前端版的「模块化 + 接口设计」。

1. 组件作为接口

一个好组件，对外的契约只有两件事：

• 输入：props（父传子）；
• 输出：emits（子通知父）。

内部实现（DOM 结构、状态、样式）应当私有。这和后端设计一个 Service 接口是一样的：依赖接口，不依赖实现。

Vue 是一个渐进式前端框架：核心只负责「数据 → 视图」的声明式绑定，路由、状态管理等按需引入。它上手快、模板直观，是国内业务系统采用率最高的框架之一。

1. 心智模型：数据驱动视图

命令式的前端操作是这样的：

// 命令式：手动找元素、改内容
const el = document.getElementById("count");
el.textContent = count;