VueJS动态个人作品集经历列表按开始日期及在职状态排序故障排查

Array.prototype.sort的回调函数要求返回数值类型的结果：

• 返回负数：比较项a排在b前面
• 返回正数：比较项b排在a前面
• 返回0：两者顺序保持不变

你的代码错误出在职状态判断的两个分支，直接返回了a、b对象而非合法数值，对象隐式转换为数字时会得到NaN，sort方法遇到NaN会直接保留元素原有顺序，因此排序逻辑完全不符合预期，同时你直接赋值原地排序后的数组，也可能出现Vue响应式检测不到更新的问题。

newExp() {
    this.editableExperience.sort((a,b) => {
        const aPeriod = a.period.split(' - ');
        const bPeriod = b.period.split(' - ');
        const aStartDate = aPeriod[0];
        const aEndDate = aPeriod[1];
        const bStartDate = bPeriod[0];
        const bEndDate = bPeriod[1];
        // 两者均为在职，按开始日期倒序
        if (aEndDate === 'Present' && bEndDate === 'Present') {
            return new Date(bStartDate) - new Date(aStartDate);
        } 
        // 仅a为在职，a排在前
        else if (aEndDate === 'Present') {
            return -1;
        } 
        // 仅b为在职，b排在前
        else if (bEndDate === 'Present') {
            return 1;
        } 
        // 均为离职，按开始日期倒序
        else {
            return new Date(bStartDate) - new Date(aStartDate);
        }
    })
    // 用展开运算符生成新数组赋值，保证Vue能监听到数组变化
    this.experience = [...this.editableExperience];
}

可以提前把每段经历的开始日期、结束日期、是否在职作为单独字段存储，不需要每次排序都拆分period字符串，既提升排序性能，也方便后续字段扩展维护。

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