vue中使用下标修改数组数据,如this.list[0]="asd
或者修改数组长度,如this.list.length=3
,都不会响应式的修改dom元素,但是没响应并不是没有改变数据,改变了数据只是vue无法响应此修改方式。
可以下载一个 Vue-Devtools 可以很清楚的看见数据变化,一位博友很贴心的铺好了路,不用弄node乱七八糟的,下载添加就可以,地址:伸手党的福利,也可以在控制台打开sources打个断点查看数据变化,不会的话可以看这里
替换的方法:
const first=new Vue({
el:"#app",
data:{
list:[1,"Asxx",3,4,5,6,7,8,9]
},
methods:{
ary:function(){
Vue.set(this.list,1,"oooooo");//改变数据
//this.list.splice(1,1,"oooooo");另一个改变数据方法
//this.list.splice(5);改变数组长度
}
}
});
//first.$set(first.list,1,"xxxxx");在全局中改变数组数据
//first.list.splice(3);在全局中改变数组长度
在vue中对象添加或删除如使用平常方法也无法响应
const first=new Vue({
el:"#app",
data:{
obj:{a:"yi",b:"er",c:"san"}
},
methods:{
shuzu:function(){
//this.obj.d="xzc";无法响应此添加方法
//delete this.obj.a;无法响应此删除方法
可响应的添加:
//Vue.set(this.obj,"d","si");添加单个属性
/*this.obj=Object.assign({},this.obj,{ 添加多个属性
s:"yi",
v:"xxx"
})*/
可响应的删除:
//Vue.delete(this.obj,"a");
//this.$delete(this.obj,"a");
}
}
});
//first.$set(first.obj,"d","si");全局中增加单个对象属性
first.obj=Object.assign({},first.obj,{//全局中增加多个
s:"yi",
v:"xxx"
})
//first.$delete(first.obj,"a");全局中删除方法