Vue.js中计算属性需通过自定义Hook（composable）复用，封装为useXXX函数并返回ref/computed；跨组件共享应借助Pinia store或provide/inject，避免响应性丢失与性能问题。Vue.js 中计算属性本身不能直接复用，但通过组合式 API 的 自定义 Hook（即封装为可复用的函数），可以高效实现逻辑复用与多组件共享。核心思路是：把依赖响应式数据的计算逻辑、副作用和事件处理抽离成独立函数，返回响应式变量和操作方法。用 composable 封装计算逻辑将原本写在 setup() 中的计算属性及相关逻辑，提取为单独的 JavaScript 函数（通常以 useXXX 命名）。该函数接收响应式参数（如 ref 或 reactive），内部使用 computed、watch 等，并返回需要暴露给组件的数据和方法。避免直接返回原始值，始终返回 ref 或 computed，保证响应性 可接收配置对象作为第二参数，支持灵活定制行为（如格式化规则、阈值） 示例：封装一个 useSearchFilter，接收搜索关键词和原始列表，返回过滤后列表和清空方法跨组件共享状态与计算结果多个组件需共用同一套计算逻辑时，不应各自调用同一个 composable —— 否则会创建多份独立响应式状态。正确做法是：在顶层（如 stores/ 目录）用 defineStore（Pinia）或 provide/inject 创建共享状态源 将计算属性逻辑写在 store 内部（使用 computed 或 getters），组件只消费结果 若不用 Pinia，可用 ref + provide 提供基础数据，再配合 computed 在各组件内二次计算（适合轻量场景）避免常见陷阱复用计算逻辑时容易忽略响应性链路断裂或性能问题： 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。