解決vue filter中調(diào)用sort 無限循環(huán)問題

一 初始代碼

1.mock創(chuàng)建隨機數(shù)據(jù)

2.調(diào)用mock數(shù)據(jù)并賦值給vue data中的list?

3.html

二 發(fā)現(xiàn)問題

1. 發(fā)現(xiàn)mock生成的數(shù)據(jù)是隨機的 數(shù)字大小沒有排序

2 .在 vue filter中調(diào)用sort 對呈現(xiàn)的數(shù)據(jù)進行處理

3. 報錯:

vue中渲染數(shù)據(jù)可能有一個無限更新循環(huán)--You may have an infinite update loop in a component render function.

4. 問題原因:

vue的響應(yīng)式原理中對于數(shù)組的更新檢測包含了一組觀察數(shù)組的編譯方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

而在filter中調(diào)用以上的方法就會導(dǎo)致無限的更新循環(huán)

5.解決方法:

?在獲取數(shù)據(jù) 渲染呈現(xiàn)之前調(diào)用sort

三 問題核心

vue的響應(yīng)式原理

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 主要還是自己看的,所有內(nèi)容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,546評論 0 25
  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,624評論 0 25
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,380評論 0 6
  • 1. Vue 實例 1.1 創(chuàng)建一個Vue實例 一個 Vue 應(yīng)用由一個通過 new Vue 創(chuàng)建的根 Vue 實...
    王童孟閱讀 1,096評論 0 2
  • vue.js是什么 是一套構(gòu)建用戶界面的漸進式框架 vue應(yīng)用組成 一個 Vue 應(yīng)用由一個通過new Vue創(chuàng)建...
    多多醬_DuoDuo_閱讀 1,137評論 0 2

友情鏈接更多精彩內(nèi)容