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

conqorld發表於2019-04-22
Vue陣列

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

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

問題產生的原因

讓我們來看看vue中資料劫持的實現。程式碼來自：https://github.com/DMQ/mvvm

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈，監聽到值變化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有屬性遍歷
    Object.keys(data).forEach(function(key) {
	    defineReactive(data, key, data[key]);
	});
};

function defineReactive(data, key, val) {
    observe(val); // 監聽子屬性
    Object.defineProperty(data, key, {
        enumerable: true, // 可列舉
        configurable: false, 
        get: function() {
            return val;
        },
        set: function(newVal) {
            observe(newVal) //物件新賦值時給新的屬性新增訂閱器
            val = newVal;
        }
    });
}

複製程式碼

1、在上述程式碼中，只有型別為‘object’的變數，它下面的屬性才會繼續遍歷，if (!data || typeof data !== 'object') {return;}。如果是個陣列，則不會去遍歷陣列裡面的東西。如：

var list = [a, b, c]
複製程式碼

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

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

解決問題的方法

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

//Vue.set( target, key, value )
this.$set(this.list, 2, 'c')
複製程式碼

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

相關文章