Vue Composition API 怎么处理跨多个函数的响应式状态同步-Vue.js-PHP中文网

vue composition api 跨函数同步依赖共享同一响应式引用：顶层定义 ref/reactive，传引用而非值；避免解构丢失响应性；跨组件用 provide/inject 或 pinia。

vue composition api 怎么处理跨多个函数的响应式状态同步

Vue Composition API 本身不提供“跨函数自动同步”的机制，响应式状态的同步完全依赖于你是否共享同一个响应式引用（ref 或 reactive 对象）。关键不是“怎么让多个函数同步”，而是“怎么确保它们操作的是同一个响应式源”。

核心原则：共享同一响应式引用

只要多个函数访问或修改的是同一个 ref 或 reactive 的属性，变化就会自动同步到所有依赖它的位置（模板、计算属性、watch 等）。

✅ 正确做法：在顶层定义一次响应式数据，然后把引用（不是值）传给多个函数
❌ 错误做法：每个函数内部各自调用 ref() 或 reactive() 创建独立副本

常见可行方式

1. 在 setup 或 <script setup></script> 中统一声明，再传入逻辑函数

例如处理表单验证和提交：

const formData = reactive({ email: '', password: '' });
const errors = ref({});

function validate() {
  errors.value = {};
  if (!formData.email) errors.value.email = '邮箱必填';
}
function submit() {
  if (Object.keys(errors.value).length === 0) {
    api.login(formData); // formData 改变会触发视图更新
  }
}

2. 封装为可复用组合函数（Composable），但返回同一份响应式对象

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

比如一个通用的分页逻辑：

// composables/usePagination.js
export function usePagination() {
  const page = ref(1);
  const pageSize = ref(10);
  const total = ref(0);

  function nextPage() { page.value++; }
  function reset() { page.value = 1; }

  return {
    page,
    pageSize,
    total,
    nextPage,
    reset
  };
}

// 组件中使用
const { page, total, nextPage } = usePagination();
// 所有调用 usePagination() 的组件都拥有自己独立的 page/total 实例
// 但在这个组件内，nextPage 和模板中的 {{ page }} 共享同一个 ref

3. 使用 provide / inject 跨层级共享响应式状态

适用于祖孙组件间需要共用状态（如主题、用户信息）：

// 父组件
const theme = ref('light');
provide('theme', theme);

// 子组件（任意深度）
const theme = inject('theme');
function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
}

特别注意：避免意外断开响应式连接

以下操作会丢失响应式，导致“不同步”：

对 ref 解构后直接使用：const { count } = toRefs(state) ✅ 可以；但 const { count } = state ❌（state 是 reactive，解构会丢失响应式）
将 ref.value 的原始值传给函数：process(count.value) → 函数内部改的是普通数字，不会影响原 ref
用 JSON.parse(JSON.stringify(obj)) 深拷贝 reactive 对象 → 得到的是普通对象，不再响应式