Vue.js：ref结合三元表达式无法响应更新？求正确实现方法

你的写法确实存在问题：salesTotalTwo用ref初始化时，只会在创建阶段执行一次三元表达式计算初始值，之后不会自动追踪salesFilter的变化——哪怕salesFilter因为dataset更新而变化，salesTotalTwo也不会重新计算，所以始终保持初始的空数组。

正确实现方式 #

把salesTotalTwo改成computed即可，它会自动追踪依赖的变化并实时更新：

const salesFilter = computed(() => {
  return Object.values(dataset.value).filter((item) => item.category === "Sales")
})
const salesTotalTwo = computed(() => {
  return salesFilter.value.length === 0 ? [] : salesFilter.value[0].values
})

补充说明 #

• ref用于存储独立的响应式值，除非手动修改它的.value，否则不会自动更新
• computed专门用于基于响应式依赖推导值，依赖变化时会自动重新计算，完全符合你需要的“数据新增时自动更新”的需求

内容的提问来源于stack exchange，提问作者Edward Glapthorn