javascript - 关于vue的data创建问题
问题描述
最近想用vue来写项目,其中在创建data的时候我先创建了个空数组:
data () {
return {
items:[]
}
},
然后在create的时候,放数据进去:
for(var i = 0;i<30;i++){
this.items[i] = {
item:i,
blowUp:false,
show:0,
backgroundColor:'white',
}
}
这样写@click之类的通过method可以改变items的属性,但是页面没有显示出样式的变化。然后纠结了很久,在create的时候换了另外一种写法:
for(var i = 0;i<30;i++){
this.items.push({
item:i,
blowUp:false,
show:0,
backgroundColor:'white',
})
}
换成push之后,通过method改变items的属性可以实时在页面体现出来。
然后我在create之后,打印两者数据,发现是这样的
第一种:
第二种:
我实在不能理解为什么这两种写法会出现这样的区别,有没有大神可以解释下。。
Vue
重写了数组的以下方法:Array.prototype.push
Array.prototype.pop
Array.prototype.shift
Array.prototype.unshift
Array.prototype.splice
Array.prototype.sort
Array.prototype.reverse
并使用 Object.defineProperty
把 Object
的属性全部转为 getter/setter
你可以打印一下 console.info(this.items.push)
然后跟进代码查看
注意事项
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:
vm.items.length = newLength
为了避免第一种情况,以下两种方式将达到像
vm.items[indexOfItem] = newValue
的效果,
同时也将触发状态更新:// Vue.set Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)
避免第二种情况,使用
splice
:example1.items.splice(newLength)
http://cn.vuejs.org/v2/guide/list.html#变异方法
这篇关于javascript - 关于vue的data创建问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!