前端开发：Vue 与框架

一、Vue 核心术语

英文	中文	说明	发音
Component	组件	Vue component、reusable component
Props	属性（父传子）	pass props、required prop、default prop
Emit	触发事件	this.$emit('change')、defineEmits
Slot	插槽	default slot、named slot、scoped slot
Scope	作用域	作用域插槽数据
Template	模板	Vue template、template syntax
Directive	指令	v-if、v-for、v-model、v-bind、@click	/dɪˈrektɪv/
Computed	计算属性	依赖数据自动计算，带缓存
Watch	监听	监听数据变化执行副作用
Lifecycle Hooks	生命周期钩子	created / mounted / updated / unmounted
Composition API	组合式 API	setup、ref、reactive、computed、watch
Options API	选项式 API	data / methods / computed / watch
Setup	组合式入口	setup(props, context)，无 this
Ref	响应式引用	ref(0) / ref(null)，通过 .value 访问
Reactive	响应式对象	reactive({ count: 0 })，自动解包	/riˈæktɪv/
ToRef / ToRefs	转 ref	从 reactive 对象中拆分属性为独立 ref
Provide / Inject	注入	跨层级传数据，替代 props 层层传递	/prəˈvaɪd/ /ɪnˈdʒekt/
Teleport	传送	把组件渲染到 DOM 其他位置	/ˈtelɪpɔːrt/
Suspense	悬念	异步组件加载中显示 fallback	/səsˈpens/
Transition	过渡	组件插入/移除时的动画效果
KeepAlive	缓存	组件切走不销毁，缓存状态
Directive	自定义指令	Vue.directive('focus', ...)	/dɪˈrektɪv/
Plugin	插件	Vue.use(plugin)、install 方法
Mixin	混入	复用组件逻辑（Vue 2）
Composable	组合式函数	useXxx()，Vue 3 推荐的逻辑复用方式	/kəmˈpoʊzəbl/
Pinia	状态管理	Vue 官方推荐的 store
Store	状态仓库	createStore / defineStore
State	状态	store state
Action	动作	store action（可异步）
Getter	计算属性（store）	store getter
Module	模块	store module（子模块）
Namespaced	命名空间	模块独立命名，防冲突

二、React 核心术语

英文	中文	说明	发音
JSX	JavaScript XML	用 JS 写 HTML 的语法糖
Component	组件	function component、class component
Hook	钩子	useState、useEffect、useMemo
useState	状态钩子	const [count, setCount] = useState(0)
useEffect	副作用	数据请求/订阅/定时器
useMemo	记忆化值	缓存计算结果，避免重复计算
useCallback	记忆化函数	缓存函数引用，给子组件传
useRef	引用	DOM ref / 可变 ref
useContext	上下文	跨层级共享数据
useReducer	归约器	复杂状态逻辑	/rɪˈdjuːsər/
useImperativeHandle	暴露方法	父组件 ref 调子组件方法
useLayoutEffect	布局副作用	DOM 更新后、浏览器绘制前执行
Fragment	片段	无包裹元素返回多个节点	/ˈfræɡmənt/
Portal	传送门	把 DOM 渲染到其他位置	/ˈpɔːrtəl/
Memo	记忆化	React.memo，props 没变跳过渲染
Reducer	归约函数	(state, action) => newState	/rɪˈdjuːsər/
Dispatch	派发	dispatch({ type: 'INCREMENT' })	/dɪˈspætʃ/
Provider	提供者	Context.Provider，提供数据	/prəˈvaɪdər/
Consumer	消费者	Context.Consumer，消费数据	/kənˈsjuːmər/
Strict Mode	严格模式	开发环境下双重渲染检测问题
Virtual DOM	虚拟 DOM	JS 对象模拟 DOM
Reconciliation	协调	对比新旧虚拟 DOM 决定最小更新	/ˈrekənsaɪl/

三、路由相关

英文	中文	说明	发音
Router	路由器	Vue Router / React Router
Route	路由	一个 URL → 一个组件的映射
Route Params	路由参数	/user/:id 中的 id
Query Params	查询参数	?page=1&sort=name
Path	路径	URL path，如 /dashboard
Navigation	导航	router.push、router.replace	/ˌnævɪˈɡeɪʃn/
Guard	守卫	beforeEach、beforeEnter，路由跳转前拦截	/ɡɑːrd/
Lazy Loading	懒加载	路由级代码分割，按需加载
Code Splitting	代码分割	动态 import，减少首屏包体积
History Mode	History 模式	无 # 号，干净 URL
Hash Mode	Hash 模式	带 # 号，兼容性好
Named Route	命名路由	给路由起名字，跳转不用写路径
Meta	元信息	route.meta，存标题/权限等自定义数据
Scroll Behavior	滚动行为	切换路由时是否回到顶部
Transition Route	路由过渡	路由切换时的动画效果

四、模板与指令常用表达

英文	中文	说明	发音
Bind	绑定	v-bind / : ，动态绑定属性
On	监听事件	v-on / @ ，监听 DOM 事件
Model	双向绑定	v-model，表单数据双向同步
If / Else / Else-if	条件渲染	真渲染假销毁
Show	条件显示	v-show，真渲染假隐藏（display）
For / Each	列表渲染	v-for，遍历数组渲染
Key	唯一标识	v-for 必须配 :key，帮助 diff
Once	只渲染一次	v-once，后续更新不重渲染
Pre / Camel	修饰符	.prevent、.stop、.camel、.sync
Ref	引用	ref="xxx"，this.$refs.xxx 获取 DOM

⬅ 返回英语-前端开发目录