Vuejs中使用sort配合过滤器对数组重新排序问题

问题描述

在vue项目中使用过滤器封装对数组排序的方法，有概率会出现：

问题分析

// 功能：利用moment将日期转化为时间戳，使用数组的sort方法进行排序
filters: {
    sortList: function(v) {
        return v.sort(function(a, b) { 
            return moment(b.startTime).unix() - moment(a.startTime).unix()
        })
    }
 },

在vue中sort方法对数组的操作导致数据的变化会被监听，这样导致数据变化后又会触发filters中的过滤器重新进行计算，导致这个过程会反复执行，爆出错误。

解决方案

通过数组的slice方法对原数组进行一次浅拷贝，操作这个新的数组进行操作，不会对原数组进行改变也就不会触发数据响应。

filters: {
    sortList: function(v) {
        return v.slice().sort(function(a, b) { 
            return moment(b.startTime).unix() - moment(a.startTime).unix()
        })
    }
 },