# Vue update loop 的问题

Vue 在进行日期排序的时候在 `methods` 中会报错。

我在循环的时候用了`v-for` 来循环组件

```js
<zhaocai-list v-for="(item,index) in test(zhaocaiData)" v-bind:key="item.id"
 ></zhaocai-list>
```

在`methods` 方法中来处理这个sortData 主要是对列表里的日期做排序 然后让列表根据时间先后来渲染

```js
       methods: {
            test(zhaocaiData){
                return zhaocaiData.sort((a,b)=>{
                    let timeA = a.time
                    let timeB = b.time
                    return new Date(timeB) - new Date(timeA);
                })
            },
       }
```

这样子处理之后前端渲染没问题，但是在console 控制台中出现了 vue warm 报警

<figure><img src="https://2114497637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F02mA7HzEYOVzWLlcQasD%2Fuploads%2Frhg84uIIz6bs463CgxxF%2Fimage.png?alt=media&#x26;token=905f78e6-3383-43c9-b8bb-2dba0bb37c0d" alt=""><figcaption></figcaption></figure>

经过审查和网上查资料发现有以下说法：

1. 如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上可能因为修改到循环对象，诱发无限循环
2. 如果筛选或排序会 更改原值。那么就会进行无限循环

我的问题属于第二种，因为用sort数组进行排序会更改源数组, 但是筛选的方法比如 filter/some 就不会产生这种情况

<figure><img src="https://2114497637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F02mA7HzEYOVzWLlcQasD%2Fuploads%2FnKh3P95FIE1Ug74bzmyN%2Fimage.png?alt=media&#x26;token=22120491-408c-4ff0-ae88-5a0b5730dc85" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2114497637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F02mA7HzEYOVzWLlcQasD%2Fuploads%2FHIDjyQzUi7BqnveFu9YI%2Fimage.png?alt=media&#x26;token=c4dd68ad-2f2b-4598-9042-39a377cb285b" alt=""><figcaption></figcaption></figure>

解决方案：这种方法放在 计算属性中处理，避免vm.$data 的深层嵌套
