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“”沒有導出的成員“ref”問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了實現(xiàn)一個簡易版的vuex持久化工具，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
今天小編就為大家分享一篇vue.js的簡單自動求和計算實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認hash模式，通過引入Vue-router對象模塊時配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細分析Vue路由History模式2023-06-06
這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
關于el-form表單驗證中的validator與validate使用時的問題
這篇文章主要介紹了關于el-form表單驗證中的validator與validate使用時的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
mpvue從底層支持 Vue.js 語法和構建工具體系，同時再結合相關UI組件庫，便可以高效的實現(xiàn)小程序開發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項目框架 ,需要的朋友可以參考下2019-04-04
vue+element UI實現(xiàn)樹形表格帶復選框的示例代碼
這篇文章主要介紹了vue+element UI實現(xiàn)樹形表格帶復選框的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue實現(xiàn)簡潔文件上傳進度條功能,實現(xiàn)原理是通過performance.now()獲取動畫的時間戳,用于創(chuàng)建流暢的動畫,結合示例代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06