# 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="/files/NDkPOZpgme9JHRbZ8L1a" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/DOjMFk6UY5PySGmqPc45" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/6Dd1wtn138tx55api70B" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gitbook.qujun.xyz/code/frond-end/vue-update-loop-de-wen-ti.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.