Vue组合式API重构响应式值后不更新问题咨询

问题场景 #

原本直接编写的计算样式与类代码可正常响应更新：

const computedStyle = computed(() => normalizeStyle([undefined, styleProp, undefined]));
const computedClass = computed(() => normalizeClass([
  "button", 
  classProp, 
  {
    "button--pressed": pressed.value,
    "button--enterheld": enterHeld.value,
    "button--long-pressed": longPressed.value,
  },
]));

重构为组合式函数后，响应式更新失效：

export const useNormalizedStyles = ({
  style: styleProp,
  class: classProp,
  preClass,
  postClass,
  preStyle,
  postStyle,
}: NormalizedStylesProps): NormalizedStylesResult => {
  const computedStyle = computed(() => normalizeStyle([preStyle, styleProp, postStyle]));
  const computedClass = computed(() => normalizeClass([preClass, classProp, postClass]));
  return {
    style: computedStyle,
    class: computedClass,
  };
};

调用方式：

const { style: computedStyle, class: computedClass } = useNormalizedStyles({
  style: styleProp,
  preClass: "button",
  class: classProp,
  postClass: {
    "button--pressed": pressed.value,
    "button--enterheld": enterHeld.value,
    "button--long-pressed": longPressed.value,
  },
});

原因分析 #

重构后传递的postClass是普通对象，其中的pressed.value、enterHeld.value等是调用useNormalizedStyles时的即时值快照，而非响应式引用。组合式函数内的computed无法追踪到这些值的后续变化，因此不会触发更新。

解决方案 #

方案一：将动态类对象改为函数返回形式 #

修改组合式函数，支持postClass传入函数，在computed执行时动态获取最新响应式值：

export const useNormalizedStyles = ({
  style: styleProp,
  class: classProp,
  preClass,
  postClass,
  preStyle,
  postStyle,
}: NormalizedStylesProps): NormalizedStylesResult => {
  const computedStyle = computed(() => normalizeStyle([preStyle, styleProp, postStyle]));
  const computedClass = computed(() => {
    // 若postClass是函数则执行，获取最新类对象
    const resolvedPostClass = typeof postClass === 'function' ? postClass() : postClass;
    return normalizeClass([preClass, classProp, resolvedPostClass]);
  });
  return {
    style: computedStyle,
    class: computedClass,
  };
};

调用时将postClass改为返回对象的函数：

const { style: computedStyle, class: computedClass } = useNormalizedStyles({
  style: styleProp,
  preClass: "button",
  class: classProp,
  postClass: () => ({
    "button--pressed": pressed.value,
    "button--enterheld": enterHeld.value,
    "button--long-pressed": longPressed.value,
  }),
});

方案二：使用响应式对象传递动态类 #

将postClass包装为reactive响应式对象，让computed能追踪其内部属性变化：

// 调用处创建响应式postClass
const postClass = reactive({
  "button--pressed": pressed.value,
  "button--enterheld": enterHeld.value,
  "button--long-pressed": longPressed.value,
});

// 若pressed等是ref，可直接关联（Vue的normalizeClass会自动解包ref）
const postClass = reactive({
  "button--pressed": pressed,
  "button--enterheld": enterHeld,
  "button--long-pressed": longPressed,
});

// 调用组合式函数
const { style: computedStyle, class: computedClass } = useNormalizedStyles({
  style: styleProp,
  preClass: "button",
  class: classProp,
  postClass,
});

推荐方案 #

优先选择方案一，函数式写法更灵活，无需额外创建响应式对象，且能确保每次computed执行时都获取最新的响应式状态。

内容的提问来源于stack exchange，提问作者Archimedes Trajano