在 Vue 中，通过 this.arr[index] 和 this.$delete(this.arr, index) 两种方式来删除数组元素，它们在响应式更新和数组变更检测上有何不同？请说明各自的实现原理和适用场景。

回答思路

1. 【回答框架 1】Vue 2 的响应式系统通过 Object.defineProperty 劫持数据，对于数组，重写了其变更方法（如 push、pop、splice 等），并收集依赖。直接通过下标赋值或 delete this.arr[index] 不会触发这些重写方法，因此无法触发视图更新。
2. 【回答框架 2】Vue.delete（即 this.$delete）是专为删除属性而设计的 API，它不仅能删除属性，还会主动触发依赖更新。对于数组，Vue.delete 实际上是通过 splice 方法删除元素，从而触发了数组的变更检测，实现了响应式更新。
3. 【回答框架 3】直接使用 delete this.arr[index] 会留下一个空槽位，数组长度不变，且不响应更新；而 Vue.delete 会真正移除元素并改变数组长度，同时触发视图更新。
4. 【回答框架 4】如果需要根据索引删除元素，应优先使用 splice 方法或 Vue.delete；若性能敏感或需要删除中间元素，splice 也是合适的选择，内部同样走变异方法能触发更新。
5. 【回答框架 5】Vue 3 中采用 Proxy 实现响应式，直接通过下标赋值或 delete 操作都会被拦截，因此两种方式的差异在 Vue 3 中不再存在，但 Vue.delete 作为全局 API 仍然保留兼容。
6. 【关键点 1】delete 删除数组元素会留下空位，长度不变，且不触发视图更新。
7. 【关键点 2】Vue.delete 实质调用 splice 删除元素，改变长度并触发依赖更新。
8. 【关键点 3】Vue 2 中直接下标删除无法响应，应使用 splice 或 Vue.delete。
9. 【关键点 4】Vue 3 的 Proxy 机制能拦截 delete 和下标赋值，直接操作也能响应。
10. 【易错点 1】不要混淆 delete 删除对象属性与数组元素，对数组应使用 splice 或 Vue.delete。
11. 【易错点 2】在 Vue 2 中，通过 length 直接缩短数组也无法触发更新，需要使用 splice。