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;
        }
    });
}

复制代码

一、在上述代码中，只有类型为‘object’的变量，它下面的属性才会继续遍历，if (!data || typeof data !== 'object') {return;}。若是是个数组，则不会去遍历数组里面的东西。如：

var list = [a, b, c]
复制代码

只对list作了劫持，而list下子属性则没有。

二、list是个引用类型，Object.defineProperty中的set只有在list的地址改变时才会被触发，list[2] = 'c'这样的操做不会引发地址改变。

解决问题的方法

vue中提供了set，手动的去添加监听。

//Vue.set( target, key, value )
this.$set(this.list, 2, 'c')
复制代码

另外，vue重写了数组的push、pop等方法，使这些操做下的变更能够被监听到。