Vue中的delete和数组中delete的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

Vue.delete 直接删除了数组 改变了数组的键值。

接下来我们来看一个例子

<template>
  <div class="vue-delete">
    <p class="title tag-blue">
      delete和Vue.delete删除数组的区别
    </p>
    <ul>
      <li :key="index" v-for="(item, index) in a">a---{{item}}</li>
    </ul>
    <button @click="handleA">处理a数组</button>
    <ul>
      <li :key="index" v-for="(item, index) in b">b---{{item}}</li>
    </ul>
    <button @click="handleB">处理b数组</button>
  </div>
</template>
<script> 
export default {
  name: "vueDelete",
  data() {
    return {
      a: [1,2,3,4],
      b: [1,2,3,4],
    }
  },
  methods: {
    handleA() {
      delete this.a[1]
      this.$set(this.a)
      console.log(this.a)
    },
    handleB() {
      this.$delete(this.b, 1)
      console.log(this.b)
    }
  }
}
</script>

如图：

总结

学过vue的小伙伴肯定都知道v-if和v-show的区别，我觉得和他们有相似的地方。

      1.v-if 它是对dom进行删除，不保留原来的位置，跟vue的delete一样他也是直接删除这个数据，不保留位置。

      2.v-show是隐藏，但是保留原来的位置，只是页面不显示。数组中的delete是对数据进行删除，但是保留原先的索引，也就是说他只是把数据清楚了，但是位置保留了。