vue中陣列變動不被監測問題

2021-09-24 08:17:29 字數 945 閱讀 8918

前兩天去玩了,接下來還有挺多學習目標的。今天來寫的之前遇到的問題好了。

在之前的專案中,有時候需要對乙個陣列的某個元素進行改動(如:list[2] = 'b'),卻發現改動了在檢視上確沒有變化,這是為什麼呢?這個問題要如何解決呢?

讓我們來看看vue中資料劫持的實現。**來自:

var data = ;

observe(data);

data.name = 'dmq'; // 哈哈哈,監聽到值變化了 kindeng --> dmq

function

observe(data)

// 取出所有屬性遍歷

object.keys(data).foreach(function(key) );

};function

definereactive(data, key, val) ,

set: function(newval)

});}複製**

1、在上述**中,只有型別為『object』的變數,它下面的屬性才會繼續遍歷,if (!data || typeof data !== 'object') 。如果是個陣列,則不會去遍歷陣列裡面的東西。如:

var list = [a, b, c]

複製**

只對list做了劫持,而list下子屬性則沒有。

2、list是個引用型別,object.defineproperty中的set只有在list的位址改變時才會被觸發,list[2] = 'c'這樣的操作不會引起位址改變。

vue中提供了set,手動的去新增監聽。

target, key, value )

this.$set(this.list, 2, 'c')

複製**

另外,vue重寫了陣列的push、pop等方法,使這些操作下的變動可以被監聽到。

Vue指令(二) 陣列的變動

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

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

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

vue中的陣列賦值問題

vue中的陣列賦值 var zjdjvue new vue 初始 mounted function methods var arr 1,3,4,5 方式一 zjdjvue moneylist arr 方式二 for var i 0 i 上面的方式一方式二賦值是將會報錯 image.png vue中陣...