Vue 不能檢測以下陣列的變動的解決辦法

2021-10-10 21:17:32 字數 644 閱讀 2006

vue 不能檢測以下陣列的變動:

當你利用索引直接設定乙個陣列項時,例如:vm.items[indexofitem] = newvalue

當你修改陣列的長度時,例如:vm.items.length = newlength

舉個例子:

var vm = new vue(

})vm.items[1] = 『x』 // 不是響應性的

vm.items.length = 2 // 不是響應性的

為了解決第一類問題,以下兩種方式都可以實現和 vm.items[indexofitem] = newvalue 相同的效果,同時也將在響應式系統內觸發狀態更新:

// vue.set

vue.set(vm.items, indexofitem, newvalue)

// array.prototype.splice

vm.items.splice(indexofitem, 1, newvalue)

你也可以使用 vm.$set 例項方法,該方法是全域性方法 vue.set 的乙個別名:

vm.$set(vm.items, indexofitem, newvalue)

為了解決第二類問題,你可以使用 splice:

vm.items.splice(newlength)

Vue不能檢測陣列或物件變動問題的解決

en class wrap 想實現的效果是點選 li 看 vm.nymbers index 是否存在,不存在設定為1,存在的話加1。點選之後數字並沒有在view層更新,而通過console列印發現資料更新了,只是view層沒有及時的檢測到。再看乙個栗子的 en class wrap 可以看到這裡的v...

Vue不能檢測陣列和物件的變化

上班第一天沒事做寫篇部落格。前段時間出去面試了下,vue不能檢測陣列和物件的變化 這個問題很高頻提起,今天來聊下這個問題 先看官網文件說明 情況一 新增的值不會觸發響應 刪除同理 情況二 原有的值改變會觸發響應 情況三 vue提供的方法 set可以觸發響應 以上3個例子總結了物件增 刪,模板沒有響應...

Vue指令(二) 陣列的變動

1 陣列更新資料,引起檢視更新 資料驅動 資料發生變化,引起檢視的變化 vue在檢測陣列變化的時候,並不是直接重新渲染整個列表,而是最大化的復用dom元素。替換的陣列中,含有相同元素的項是不會被重新渲染,所以,新陣列替換舊陣列是,不用擔心效能問題。陣列函式 改變原陣列 push pop shift ...