官方文档 Vue.delete
和Vue.set()一起总结一下吧
我们平常使用vue进行开发时,会遇到vue生成实例之后,再次给数据赋值的时候,数据不会更新到视图上的情况,vue文档上说明实例创建之后添加新的属性到实例上,它不会触发视图更新。
例如:
<template>
<div>
<ul>
<li v-for="item in array">{{item.name}}:{{item.age}}{{item.hobby}}</li>
</ul>
<button @click="handleChange">点击改变值</button>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
array:[
{ name: 'xiao1',age: 13 },
{ name: 'xiao2',age: 15 },
{ name: 'xiao3',age: 18 }
]
}
},
methods: {
handleChange() {
this.array[0].hobby = '篮球' // 无法添加属性
}
}
}
</script>
vue2.x的数据劫持是通过Object.defineProperty去实现的,缺陷之一就是无法检测到对象属性的新增或删除。(在vue3中将用proxy去解决这个问题)
正确的写法应该是:
this.$set(this.array[0],'hobby','篮球')
需要注意一点:对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
const app = new Vue({
data: {
a: 1
}
}).$mount('#app1')
Vue.set(app.data, 'b', 2)
同样的,Vue.delete则是删除array里对象的键值
this.$delete(this.array[0],'hobby')
与js的delete方法比较:
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a)
this.$delete(b,1)
console.log(b)
delete只是将被删除的元素变成了 empty/undefined 其他的元素的键值、数组的长度还是不变。
Vue.delete 是直接删除了数组,改变了数组的键值和长度。
日常在Vue中的使用场景
1、在你的Vuex的配置文件中,有如下代码
// 状态,存放一些公用的属性
state:{
personalinfo:{
name:"Liu",
age:27
}
},
2、在Vuex的配置文件中的mutations里写入添加或者删除的方法;
如下代码;
在Vue.set中有三个参数,第一个是你要操作的数据,第二个是你要添加的字段,第三个是添加的字段的值;
在Vue.delete中有两个参数,第一个是你要操作的数据,第二个是你要删除的字段
mutations:{
// 响应式给对象添加数据或者删除数据
addinfoobj(state){
Vue.set(state.personalinfo,"address","上海")
},
delinfoobj(state){
Vue.set(state.personalinfo,"age")
}
},
3、在你的组件中
<template>
<div>
<p>{{$store.state.personalinfo}}</p>
<button @click="addinfo">新增信息</button>
<button @click="delinfo">删除信息</button>
</div>
</template>
<script>
export default {
name: "Vuexfive",
methods:{
addinfo(){
this.$store.commit("addinfoobj")
},
delinfo(){
this.$store.commit("delinfoobj")
}
}
}
</script>
效果如下图
同时,也会看到在Devtools中也会有变化