Vue.js中使用Lodash sortBy排序报错，求替代实现方案

可能的报错原因 #

1. 单独导入lodash.sortby可能存在版本兼容或路径问题，导致sortBy方法未正确加载
2. 部分insight对象的insightType或insightType.attribute不存在，直接用属性路径排序会触发undefined报错

写法一：修正Lodash用法 #

换成导入完整Lodash库，同时处理属性可能不存在的情况，避免报错：

import _ from 'lodash';

// ...

computed: {
  visibleInsights() {
    // 先过滤可见数据
    const filteredInsights = this.insights.filter(insight => {
      const id = this.getInsightId(insight);
      return !this.hiddenInsights.includes(id);
    });
    // 用函数式排序，处理属性不存在的默认值
    return _.sortBy(filteredInsights, [insight => insight?.insightType?.attribute || '']);
  }
}

写法二：用原生JS的sort方法替代 #

如果不想依赖Lodash，直接用原生数组排序，同样处理边界情况：

computed: {
  visibleInsights() {
    const filteredInsights = this.insights.filter(insight => {
      const id = this.getInsightId(insight);
      return !this.hiddenInsights.includes(id);
    });
    // 展开数组避免原地修改原数据，用localeCompare做字符串自然排序
    return [...filteredInsights].sort((a, b) => {
      const attrA = a?.insightType?.attribute || '';
      const attrB = b?.insightType?.attribute || '';
      return attrA.localeCompare(attrB);
      // 若是数字类型排序，替换成：return attrA - attrB;
    });
  }
}

这两种写法都能在计算属性中完成渲染前的排序，同时避免因属性不存在或导入问题导致的报错。

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