嘿，朋友们！今天咱们聊聊一个在前端圈子里经常被搞混的概念：composables 和 utils。 说实话，我也曾经把两者搞得一团糟。 现在就让你轻松区分它们，像喝茶一样舒服。 哈哈，别急，慢慢来。

Composables 和 Utils 的基本面貌

先说清楚这两个名字背后的本质。 utils 就是通用工具函数。 纯粹、无状态、框架无关；只Zuo「输入 → 处理 → 输出」。 典型场景：格式化日期、字符串操作、数学计算等。 不需要 Vue 的 ref 或生命周期；任何项目douNeng直接拿去用。

相反，composables 是 Vue 的组合式 API特产。 它专门封装带有响应式状态和副作用的逻辑。 Ru果你在代码里用了 ref / reactive / watch / onMounted 等，就肯定是要写成 composable。 那种只关心数据变化而不是单纯运算的功Neng才放这里。 比如监听窗口尺寸变化、请求接口并存储到 reactive 对象里等等。

举个小例子

下面先给你一个 utils 示例——金额格式化：

export function formatMoney: string {
  const n = typeof num === 'string' ? parseFloat : num;
  if ) return '';
  return n.toFixed;
}

这段代码跟 Vue 没啥关系，你随便在 Node 或 React 项目里跑dou行。

再kan一个 composable 示例——监听窗口尺寸：

import { ref, onMounted, onUnmounted } from 'vue';
export function useWindowSize {
  const width = ref;
  const height = ref;
  function updateSize {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted => window.addEventListener);
  onUnmounted => window.removeEventListener);
  return { width, height };
}

这里用了 Vue 的响应式 API，还挂载了生命周期钩子，所以只Neng放在 composable 文件夹里。

为什么百度不收录？

说起搜索引擎，有人会问：“我写了这么多技术文章，为什么百度不收录？” 其实原因hen简单： 1️⃣ 页面内容过于技术化，没有足够的用户标签或关键词； 2️⃣ robots.txt 阻止抓取； 3️⃣ 网站整体 SEO Zuo得不到位，比如缺少标题标签或元描述； 4️⃣ 内容geng新频率低，也会影响抓取频率。 所以Ru果你想让文章被geng多人kan到，就得给页面加点友好标签，让机器读懂你的意思——别忘了