vue數(shù)組動(dòng)態(tài)刷新失敗問(wèn)題及解決
前言
vue 數(shù)組動(dòng)態(tài)刷新失敗，包括視使用pop、push、splice，shift等數(shù)組函數(shù)和this.$forceUpdate()強(qiáng)制刷新等方式也是失敗的
原因
其實(shí)原因不在于所謂的，vue不監(jiān)聽(tīng)數(shù)組的問(wèn)題，
事實(shí)上，只是由于 JavaScript 的限制，Vue 不能檢測(cè)以下數(shù)組的變動(dòng)：
當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)：
例如：
vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，
例如：
vm.items.length = newLength
但是我是直接賦值的
vm.items. = new item；
這種方式，vue依舊是可以監(jiān)聽(tīng)到的，所以我嘗試了上面的幾種方式，都未成功
最后，我突然看到一個(gè)詞** “就地復(fù)用” **，在官網(wǎng)上，有這么的一句話
- 當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略。
- 如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不是移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。
- 這個(gè)默認(rèn)的模式是有效的，但是只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài)（例如：表單輸入值）的列表渲染輸出。
所以，我就嘗試加一個(gè)唯一id作為key值，最終成功了
所得
- 直接使用對(duì)象的屬性進(jìn)行修改，頁(yè)面是不能冬天刷新的
- 視同v-for的時(shí)候，盡量加上唯一值作為key，避免vue使用“就地復(fù)用” 策略，導(dǎo)致顯示出現(xiàn)問(wèn)題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何解決模塊““vue“”沒(méi)有導(dǎo)出的成員“ref”問(wèn)題
這篇文章主要介紹了如何解決模塊““vue“”沒(méi)有導(dǎo)出的成員“ref”問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的vuex持久化工具
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的vuex持久化工具，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
今天小編就為大家分享一篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，通過(guò)引入Vue-router對(duì)象模塊時(shí)配置mode屬性可以啟用history模式，本文將通過(guò)代碼示例給大家詳細(xì)分析Vue路由History模式2023-06-06
這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問(wèn)題
這篇文章主要介紹了關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
mpvue從底層支持 Vue.js 語(yǔ)法和構(gòu)建工具體系，同時(shí)再結(jié)合相關(guān)UI組件庫(kù)，便可以高效的實(shí)現(xiàn)小程序開(kāi)發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項(xiàng)目框架 ,需要的朋友可以參考下2019-04-04
vue+element UI實(shí)現(xiàn)樹(shù)形表格帶復(fù)選框的示例代碼
這篇文章主要介紹了vue+element UI實(shí)現(xiàn)樹(shù)形表格帶復(fù)選框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過(guò)performance.now()獲取動(dòng)畫(huà)的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫(huà),結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06