vue 排序无限循环问题解决

在vue里对每个数组排序，会出现无限循环的问题，我认为的原因是:

    vue动态监听data里数组的变化，数组刚一排序发生变化，vue立马重新执行排序导致无限循环。

    

解决问题: 

    1、将要排序的数组命名为全局变量，这样不受vue的监听

    2、全局数组赋值vue里的数组时，不要使用=号，这样只是把全局数组的地址指向vue数组地址(用遍历vue数组，push进全局数组里)

代码片段 对数组对象属性进行排序（**************************为解决思路）：

var sloveSortList = []; //解决vue中数组排序无限循环的问题 **************************

export default {

data() {

return {

        

        showSectionList: [], //界面需要显示的断面,还没有进行排序

watch:{

        //列表发生变化

showSectionList: function(){

//传递点位列表数据，给父级reallndex.vue页面

this. leftshowSection( this. showSectionList);

//把showSectionList数组赋值给sloveSortList，如果直接=，相当于引用地址，排序的时候vue监听showSectionList会出现无限循环。

sloveSortList = [];

for( var i = 0; i < this. showSectionList.length; i ++ ){

sloveSortList. push( this. showSectionList[ i]);         **************************

}

//把变化了的列表赋值到准备要排序的sortShowSectionData上

this. sortShowSectionList = this. sortShowSectionData()     **************************

//赋值排好序的数组，为了搜索使用

this. beforeSearchList = this. sortShowSectionList;

//默认选中第一个断面传递给父组件

this. showSectionClick( 0);

}

methods: {

//列表排序方法

sortShowSectionData: function(){

var factorNumber = this. nowFactor. factor_code + 'Level';

if( this. nowFactor. factor_code == undefined || this. nowFactor. factor_code == 'NaN' || this. nowFactor. factor_code == null){

return

}

//对列表进行了排序

var searchList = sloveSortList. sort((a,b) =>{             **************************

var factorNumber = this. nowFactor. factor_code;

if( parseFloat( a[ factorNumber]) > parseFloat( b[ factorNumber])){

return - 1;

} else if( parseFloat( a[ factorNumber]) == parseFloat( b[ factorNumber])){

return 0;

} else{

return 1;

}

});

return searchList;

},