delete 和Vue.delete 删除数组的区别

delete

• delete 是 JavaScript 的内置操作符，用来删除对象的属性。当用 delete 删除数组中的元素时，它只会将元素的值置为 undefined，同时不会改变数组的长度。被删除的元素位置会被保留为一个空洞，即数组的索引位置仍然存在，但对应的元素值为 undefined
• 使用 delete 删除数组中的元素，可能会导致数组的空洞和索引位置不连续，不够直观，也可能会影响到一些数组操作和迭代时的结果

let arr = [1, 2, 3];
delete arr[1];

console.log(arr);  // [1, undefined, 3]
console.log(arr.length);  // 3

Vue.delete

• 直接删除了数组 改变了数组的键值
• Vue.delete：Vue.delete 是 Vue.js 框架提供的一个全局方法，专门用于删除 Vue 响应式对象（包括数组和对象）中的属性或数组元素。与 delete 不同，Vue.delete 删除数组中的元素时，会触发 Vue 的响应式更新机制，确保删除操作能够被 Vue 监测到并更新视图

var vm = new Vue({
  data: {
    arr: [1, 2, 3]
  }
})
Vue.delete(vm.arr, 1);
console.log(vm.arr);  // [1, 3]
console.log(vm.arr.length);  // 2

• 使用 Vue.delete 删除数组中的元素会使数组长度减少，并且确保索引位置连续，删除后的数组会触发响应式更新

-------------------------------------------------------------------------2024.6.1每日一题