Vue3中基于Props的Computed数组无法排序问题求助

问题描述 #

在Vue组件中使用返回数组的computed计算属性，通过<component v-for="(item, index) in sortedItems" ...more props />渲染列表。Props定义如下：

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

computed实现代码：

const sortedItems = computed(() => {
    return props.items.sort((l, r) => {
        const lValues = l.item.subItems.map(i => i.optValue)
        const rValues = r.item.subItems.map(i => i.optValue)
        const lMin = (Math.min.apply(null, lValues));
        const rMin = (Math.min.apply(null, rValues));
        return (lMin < rMin ? -1 : 1);
    })
});

传入的Props数据结构：

[
    {
        item: {
            name: "item1",
            subItems: [
                {
                    optName: "name1",
                    optValue: 60
                },
                {
                    optName: "name2",
                    optValue: 70
                },
            ]
        },
    },
    {
        item: {
            name: "item2",
            subItems: [
                {
                    optName: "name3",
                    optValue: 80
                },
                {
                    optName: "name4",
                    optValue: 90
                },
            ]
        },
    },
    {
        item: {
            name: "item3",
            subItems: [
                {
                    optName: "name5",
                    optValue: 50
                },
                {
                    optName: "name6",
                    optValue: 60
                },
            ]
        },
    },
]

该排序逻辑在Vue环境外测试正常，但在组件内无法生效，怀疑是缓存或旧数据留存问题。

问题根源 #

1. Array.sort()是原地排序：直接调用props.items.sort()会修改原props数组，违反Vue单向数据流原则；且原数组引用未改变，Vue响应式系统无法检测到数组内容变化，导致computed依赖不触发更新。
2. computed缓存机制：第一次排序后原数组已被修改，后续computed会直接返回缓存的排序结果，即使原props数组后续有更新，也可能因为引用未变而不重新计算。

解决方案 #

1. 创建数组副本再排序 #

在排序前先复制原数组，避免修改原props，同时确保每次computed计算都基于新的数组副本，触发正确的响应式更新：

const sortedItems = computed(() => {
    // 用展开运算符创建数组副本，避免修改原props.items
    return [...props.items].sort((l, r) => {
        const lValues = l.item.subItems.map(i => i.optValue)
        const rValues = r.item.subItems.map(i => i.optValue)
        // 简化Math.min调用方式
        const lMin = Math.min(...lValues);
        const rMin = Math.min(...rValues);
        return lMin - rMin; // 直接返回差值，替代三元表达式
    })
});

也可以用props.items.slice()创建副本，效果一致：

return props.items.slice().sort(/* 排序逻辑 */)

2. 确保props数组的响应式更新 #

如果父组件更新items时是直接修改原数组内容而非替换引用，Vue可能无法检测到变化。父组件更新数组时，应使用Vue的响应式数组方法（如push、splice）或直接替换数组引用（如items = [...newItems]），确保子组件能接收到更新后的数组。

3. 优化排序逻辑（可选） #

可以提前缓存每个item的最小optValue，避免每次排序都重复计算：

const sortedItems = computed(() => {
    return [...props.items].map(item => ({
        ...item,
        minOptValue: Math.min(...item.item.subItems.map(i => i.optValue))
    })).sort((l, r) => l.minOptValue - r.minOptValue)
});

渲染时使用sortedItems中的item字段即可，这样减少了排序过程中的重复计算，提升性能。

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