前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库Vue 组合式函数 use 命名与返回 refs 约定
VuVue应用与性能

Vue 组合式函数为什么用 use 命名,返回普通对象还是 reactive 对象?

命名约定帮助使用者识别有状态逻辑,返回结构则决定解构后是否还保留响应式入口。

前端进阶之旅 · 一题精讲更新于 2026.09.06
Vue#应用与性能#性能优化
先看核心答案读代码示例
理解线索

返回值承担两类接口

  1. 状态入口让调用者观察当前值及后续变化
  2. 动作入口通过命名操作执行受约束的状态更新
  3. 组合结构决定解构、重命名与模板使用是否清楚

Vue 的 use 命名不要直接套用其他框架的调用规则,实际限制来自使用了哪些 Vue API。

核心回答

先记住这个答案

Vue 组合式函数通常以 use 开头,让调用者意识到它可能创建响应式状态、监听或生命周期关联;这个前缀本身没有特殊运行魔法。常见返回形式是普通对象包含多个 ref 和动作函数,调用者解构后仍能保留各个 ref 的响应能力。直接返回 reactive 对象也可以,但解构其中的原始字段可能变成当前值快照。应围绕状态所有权、解构方式和更新入口设计返回接口,而不是只统一函数名字。

  • use 是约定,不会自动创建实例状态或执行清理
  • 普通对象包 ref 便于解构后保留响应式引用
  • 返回可写状态还是只读视图与动作,需要明确选择

前缀表达使用预期而不改变语义

看到 useSelection,调用者可以预期这是封装了选择状态和相关行为的函数,通常应查看它是否需要组件上下文、是否会注册监听。普通格式化函数即使也以 use 开头,不会因此突然具备响应式能力;反过来,不符合命名约定的函数也可能创建需要清理的副作用。

命名应说明封装的业务能力,例如分页、选择或连接状态,避免用过于宽泛的 useCommon 装入大量无关逻辑。一个组合式函数的输入、输出和清理责任越清楚,越容易被其他函数组合,而不需要读遍内部代码。

普通对象包 ref 为什么便于解构

下面每次调用都在函数内创建独立的选择状态,返回普通对象中的 selectedId 是 ref。调用者解构或重命名该字段,拿到的仍是同一个 ref;clear 则提供明确动作。函数没有依赖组件生命周期,因此这段纯响应式逻辑可以独立测试。

如果返回的是 reactive({ selectedId: null }),直接把 selectedId 解构出来通常只得到当时的原始值。可以保留整个对象使用,或按需求用 toRefs 提供字段引用,但不能假定普通 JavaScript 解构会自动维持对象属性的连接。

普通返回对象保留 ref 与动作TypeScript
import { ref } from 'vue';

function useSelection() {
  const selectedId = ref<string | null>(null);
  function select(id: string) { selectedId.value = id; }
  function clear() { selectedId.value = null; }
  return { selectedId, select, clear };
}

解构 selectedId 后调用 select,原 ref 的 value 会更新。两次 useSelection 调用各自创建状态,除非实现主动引用了外部共享容器。

返回结构还要表达更新权限

示例直接暴露可写 ref,调用者可以绕过 select 自行赋值,这适合简单状态接口。如果更新需要校验或联动多项状态,可以返回 readonly 视图并提供动作函数,让正常调用路径更清楚。只读设计也应说明实际约束范围,不能把它当作安全权限机制。

返回字段命名要避免和其他组合式函数频繁冲突,解构时可用局部重命名表达来源。增加功能时优先保持已有字段语义,不要把同名 data 从 ref 悄悄改成普通快照。测试除了当前值,还应检查解构后更新、多个实例隔离以及动作之间的状态关系。

回答前,多想一步

容易答错的地方

用 use 命名就会自动清理副作用
清理来自正确的作用域、生命周期或显式停止逻辑,命名不会替实现完成这些工作。排查“Vue 组合式函数 use 命名与返回 refs 约定”时还要核对输入、版本和执行顺序,并用反例确认修复后的边界。
reactive 返回对象随便解构都响应
解构原始字段可能丢失属性入口,应保留对象或提供合适的 ref。排查“Vue 组合式函数 use 命名与返回 refs 约定”时还要核对输入、版本和执行顺序,并用反例确认修复后的边界。
试着用自己的话回答

面试官还会怎么问?

一定要返回普通对象吗?

不是硬性限制。返回 reactive 对象适合整体使用的接口,但必须说明解构方式和字段引用的行为。

两个调用会天然共享状态吗?

不会由命名决定。状态在函数内还是模块外创建,才决定常见的共享范围。针对“Vue 组合式函数 use 命名与返回 refs 约定”,还应保留最小复现、预期结果和失败路径,避免只凭一次现象下结论。

什么时候需要只读返回值?

当更新需要遵守校验或多字段一致性时,只读视图配合动作可以减少误用;简单本地状态可以保留直接写入能力。

从一道题,走向一组知识

把知识连起来

应用与性能

Vue 组合式函数的 ref 放在模块顶层和函数内部,共享范围有什么区别?

状态创建位置决定实例与模块共享范围

应用与性能

Vue 组合式函数为什么返回 readonly 状态,更新应该从哪里进行?

用只读视图与动作表达状态归属继续对照“Vue 组合式函数 use 命名与返回 refs 约定”的触发条件、结果与失败边界。

响应式原理

Vue toRef 和 toRefs 怎么选择,和 ref(state.field) 有什么区别?

为 reactive 属性建立可解构引用

参考资料

  • Vue:组合式函数命名与返回约定
  • Vue:toRefs

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 前缀表达使用预期而不改变语义
  3. 普通对象包 ref 为什么便于解构
  4. 返回结构还要表达更新权限
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑