前两天去玩了,接下来还有挺多学习目标的。今天来写的之前遇到的问题好了。
在之前的项目中,有时候需要对一个数组的某个元素进行改动(如: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等方法,使这些操作下的变动可以被监听到。