vue數(shù)組動態(tài)刷新失敗問題及解決
更新時間：2024年03月11日 08:37:38 作者：趙成默
這篇文章主要介紹了vue數(shù)組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
vue 數(shù)組動態(tài)刷新失敗，包括視使用pop、push、splice，shift等數(shù)組函數(shù)和this.$forceUpdate()強制刷新等方式也是失敗的
原因
其實原因不在于所謂的，vue不監(jiān)聽數(shù)組的問題，
事實上，只是由于 JavaScript 的限制，Vue 不能檢測以下數(shù)組的變動：
當你利用索引直接設置一個數(shù)組項時：
例如：
vm.items[indexOfItem] = newValue
當你修改數(shù)組的長度時，
例如：
vm.items.length = newLength
但是我是直接賦值的
vm.items. = new item；
這種方式，vue依舊是可以監(jiān)聽到的，所以我嘗試了上面的幾種方式，都未成功
最后，我突然看到一個詞** “就地復用” **，在官網上，有這么的一句話
- 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。
- 如果數(shù)據(jù)項的順序被改變，Vue將不是移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。
- 這個默認的模式是有效的，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài)（例如：表單輸入值）的列表渲染輸出。
所以，我就嘗試加一個唯一id作為key值，最終成功了
所得
- 直接使用對象的屬性進行修改，頁面是不能冬天刷新的
- 視同v-for的時候，盡量加上唯一值作為key，避免vue使用“就地復用” 策略，導致顯示出現(xiàn)問題
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法
這篇文章主要給大家介紹了關于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法,vue比較常見的坑就是數(shù)據(jù)(后臺返回)更新了,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進行合并,所以下面這篇文章主要給大家介紹了關于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
這篇文章主要跟大家介紹了vue項目中全局引入1個.scss文件的問題解決，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要介紹了vue項目自動設置請求狀態(tài)的配置方法,本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue3+webpack中npm發(fā)布組件的實現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能示例
這篇文章主要介紹了vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能,結合實例形式分析了vue+elementUI表單相關操作技巧,需要的朋友可以參考下2019-05-05
關于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題
這篇文章主要介紹了關于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
VueNative是一個使用JavaScript構建跨平臺原生移動應用程序的框架m這篇文章主要給大家介紹了關于如何利用Vue Native構建移動應用的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了解決Vue3+ts項目打包時報錯的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06