Vue3自定义Hook中更新状态无法触发组件重渲染问题求助

Hey 👋，从React转Vue3确实会遇到一些响应式逻辑的差异，我来帮你分析下问题所在，以及对应的解决方案：

首先排查最可能的核心问题：你的自定义Hook是否在每次调用时都创建了新的cart数组？

如果你的useCart是像下面这样写的（把cart定义在函数内部）：

// ❌ 错误写法：每次调用useCart都会生成新的独立cart
export function useCart() {
  const cart = reactive([])

  const setCart = (productId) => {
    cart.push({
      qty: 1,
      productId
    })
  }

  return { cart, setCart }
}

那每个组件调用useCart()都会得到一个完全独立的cart数组，组件之间的状态完全不共享——自然在一个组件更新cart后，另一个组件的cart还是初始值，看起来像是“不响应”。

解决方案1：把cart定义为模块级变量，实现状态共享 #

要让所有组件共享同一个购物车状态，需要把cart放在hook函数的外部，作为模块内的全局变量（只会初始化一次）：

// ✅ 正确写法：cart定义在hook外部，所有组件共享同一状态
import { reactive } from 'vue'

// 模块级变量，整个应用中只会创建一次
const cart = reactive([])

export function useCart() {
  const setCart = (productId) => {
    cart.push({
      qty: 1,
      productId
    })
  }

  return { cart, setCart }
}

这样不管哪个组件调用useCart()，拿到的都是同一个cart数组，调用setCart后所有使用该cart的组件都会自动触发重渲染。

解决方案2：用ref替代reactive定义数组（可选） #

Vue3中对于数组、字符串这类类型，用ref有时候更直观（对React开发者来说，ref.value的写法有点类似React的setState逻辑），同样能解决状态共享问题：

import { ref } from 'vue'

const cart = ref([])

export function useCart() {
  const setCart = (productId) => {
    cart.value.push({
      qty: 1,
      productId
    })
  }

  return { cart, setCart }
}

在模板中使用时，Vue会自动帮你解包ref，不需要写cart.value，直接用cart就行：

<template>
  <div v-for="item in cart" :key="item.productId">
    商品ID: {{ item.productId }}，数量: {{ item.qty }}
  </div>
</template>

额外说明：为什么偶尔push还是没反应？ #

如果已经把cart定义在模块外部，但还是没触发更新，可能是你在组件中做了响应式丢失的操作，比如：

• 把cart解构后赋值给一个非响应式变量并修改（比如const items = cart; items = []）
• 使用Object.assign或展开运算符破坏了响应式引用
• 在模板中没有直接使用hook返回的cart，而是通过非响应式中间变量渲染

只要确保在模板中直接使用hook返回的cart，并且cart是共享的响应式对象，push操作就会正常触发组件重渲染。

备注：内容来源于stack exchange，提问作者User123123