Vue 3 中 splice() 方法的用法及响应式机制

在 Vue 3 中，splice() 方法用于在数组中插入、删除或替换元素。它可以在指定的索引处添加或删除元素，并返回被删除的元素。splice() 方法可以用于更新 Vue 3 中的响应式数组，触发视图的重新渲染。\n\n在 Vue 3 中，由于使用了 Proxy 来实现数据的响应式，数组的变更方法（如 push、pop、shift、unshift、splice 等）已经被重写，以便能够正确地触发响应式更新。因此，当我们使用 splice() 方法对数组进行操作时，Vue 3 会检测到数组的变化，并自动更新视图。\n\n例如，我们可以使用 splice() 方法向数组中插入元素：\n\njavascript\nconst fruits = ['apple', 'banana', 'orange'];\nfruits.splice(1, 0, 'grape');\nconsole.log(fruits); // ['apple', 'grape', 'banana', 'orange']\n\n\n在上面的例子中，splice() 方法在索引 1 处插入了 'grape'，不删除任何元素。插入后，数组变为 ['apple', 'grape', 'banana', 'orange']。由于对数组进行了修改，Vue 3 会检测到这个变化，并更新相关的视图。\n\n需要注意的是，Vue 3 中的 splice() 方法会返回一个新的数组。这是因为 Vue 3 中的响应式数组使用了 Proxy，对原生的 splice() 方法进行了重写，返回的是一个新数组。如果我们需要获取被删除的元素，可以使用返回的数组来获取。