業務場景1
我們需要做一個數據列表頁面,需要讓他每8秒進行一次更新
存在問題及如何解決
1、直接寫定時任務,賦值給list(列表數據保存的對象),會直接破壞vue對象(其實是內存地址被破壞)
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也會改變(共享同一個內存地址所到賬) 所以不能用淺拷貝來拷貝條件,因爲我們改條件其實拷貝也會變(我們目的是點搜索纔會改變)
深拷貝(點擊搜索執行)
定時任務