Vue.delete()

官方文档 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中也会有变化