在Vue中创建响应式对象经常用到Vue提供的observe方法。对于包含对象数组的Vue响应式对象的实现,我们可以像下面的代码示例一样,使用Vue.set方法为每个对象添加响应式属性:
// 创建空对象数组
var objArr = []
// 初始化对象数组
for (var i = 0; i < 5; i++) {
objArr.push({
id: i,
name: 'object ' + i,
count: i
})
}
// 创建Vue响应式对象
var reactiveObj = Vue.observable({
objectArray: objArr
})
// 对每个对象添加响应式属性
reactiveObj.objectArray.forEach(function (obj) {
Vue.set(obj, 'selected', false)
})
在以上代码中,我们首先创建了一个空数组objArr,并初始化了5个对象,然后通过Vue.observable创建了一个响应式对象reactiveObj,将objArr作为其属性objectArray的初始值。接着,我们使用forEach方法遍历了reactiveObj.objectArray中的每一个对象,通过Vue.set方法为其添加了selected属性,并将其值设置为false。由此,每个对象都变为了响应式对象,当selected属性发生变化时,能够自动触发Vue的响应式更新机制。
注意,如果我们没有使用Vue.set方法,直接给一个对象添加一个属性,这个属性是不会被Vue监听的,也就无法触发Vue的响应式更新机制。
下一篇:包含对象数组和字符串数组的对象