Vue3 UI交互总览
从状态、事件、组件通信、过渡和工程配套角度整理 Vue3 UI 交互的理解主线。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 主题入口: vue3
- 相关概念: vue-component-communication, vue-v-model, vue-conditional-and-list-rendering, vue-custom-directives, pinia
Vue3 UI交互总览
Vue3 里的 UI 交互，不是单靠某一个 API 完成的，而是由状态、事件、组件通信、条件渲染和工程配套一起组成的。把这些能力放在一起理解，比单独记零散写法更有用。
为什么要单独整理这一层
很多页面一开始能写，但越写越乱，通常不是因为少学了某个 API，而是没有把“交互到底由哪几层组成”这件事想清楚。
Vue3 UI 交互的 5 个核心层次
状态
交互首先依赖状态变化。按钮开关、输入值、弹窗显示、加载中、选中项，本质都是状态。
基础可回看：Vue 响应式系统、Vue中的ref和reactive。
事件
用户点击、输入、提交、拖拽等行为，都会通过事件进入组件逻辑。
组件通信
当交互跨越多个组件时，就会进入 props、emit、slot、provide/inject 这些通信机制。见 vue-component-communication。
渲染切换
交互最终要落到界面变化上，所以 v-if、v-show、v-for、v-model 都是 UI 交互的组成部分。见 vue-conditional-and-list-rendering 和 vue-v-model。
工程配套
当交互规模变大时，往往还会牵涉：
- pinia 里的共享状态
- UI 组件库
- 请求层
- 过渡动画
- 自定义指令
一条常见交互主线
- 用户触发事件
- 组件修改本地状态或共享状态
- 组件之间通过通信机制同步意图
- 模板根据新状态重新渲染
- 必要时再接入动画、路由或外部系统
常见误区
- 把所有交互状态都提到全局
- 用复杂组件通信解决本该局部解决的问题
- 页面还没复杂到那个程度，就过早堆状态管理和抽象
- 把交互问题理解成“组件库用法问题”
最短记忆方式
Vue3 UI 交互 = 状态变化 + 事件响应 + 组件通信 + 渲染反馈 + 工程配套。