vue定時請求改變單頁數據的內存地址問題

業務場景1

我們需要做一個數據列表頁面,需要讓他每8秒進行一次更新

存在問題及如何解決

1、直接寫定時任務,賦值給list(列表數據保存的對象),會直接破壞vue對象(其實是內存地址被破壞)
1、
2、我們可以直接打印查看(注意看最後第二個打印有__ob__:Observer)
在這裏插入圖片描述在這裏插入圖片描述
我們直接 this.list=response會破壞vue對象其實說白了就是破壞了內存的地址(此地址非彼地址)
出現的問題就是數據不能雙向綁定(地址都不一樣了肯定就不能雙向綁定了)
在這裏插入圖片描述
上圖,我們通過調試工具發現改變了data裏面的值,視圖層的值是不會改變的,其實就是破壞了內存地址
如何解決
Object.assign(&result, value) 這樣會比較好理解吧,保留內存地址
代碼這麼寫
在這裏插入圖片描述

業務場景2

我們接着上面業務場景1加上:我們需要做一個數據列表頁面,需要讓他每8秒進行一次更新(還帶條件搜索)

存在問題及如何解決

在未點擊搜索時,填寫相關條件是會緩存到條件對象裏面的,當沒有點擊搜索,而每8秒的定時任務就把條件帶過去了,這樣造成帶回來的數據和當前列表數據完全不一樣,當然也就會渲染出錯
在這裏插入圖片描述
解決思路:我們可以將條件拷貝下來,每8秒請求使用的條件就是拷貝的條件,而拷貝的條件是讓他點搜索再更新。
拷貝就存在有深拷貝與淺拷貝之分
說明:淺拷貝
this.CachelistQuery= this.listQuery 這樣 this.listQuery去改變 其實this.CachelistQuery也會改變(共享同一個內存地址所到賬) 所以不能用淺拷貝來拷貝條件,因爲我們改條件其實拷貝也會變(我們目的是點搜索纔會改變)
深拷貝(點擊搜索執行)
在這裏插入圖片描述
定時任務在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章