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>