【VUE】Vue3通过数组下标更改数组视图为什么会更新?

在 Vue 3 中,使用 Proxy 来实现了对数组的响应式监听,相比于 Vue 2 使用的 Object.defineProperty(),Proxy 更加高效和灵活。

因此,在 Vue 3 中,通过数组下标直接更改数组中某一项的值,也能够被 Vue 正确监听到并触发视图更新。

Vue 3 中,数组的修改操作依然分为两类:变异方法和非变异方法。其中,非变异方法包括以下几种:

  • filter
  • map
  • reduce
  • some
  • every
  • slice 等

这些方法返回一个新数组,且不会修改原数组本身。而变异方法则会修改原数组本身,例如:

  • push
  • pop
  • shift
  • unshift
  • splice 等

对于非变异方法,Vue 3 直接使用了 JavaScript 原生的数组方法,并且将其结果转化为响应式的数组,从而能够正确地进行界面的更新。

对于变异方法,Vue 3 则是使用 Proxy 对数组进行了处理,并且将变异方法进行了重写,从而实现了针对性的数组数据更新,避免了 Vue 2 中需要手动调用特殊方法来更新数组或者借助于 Object.defineProperty() 的方式实现。

因此,在 Vue 3 中,即使是通过数组下标直接修改数组中的某一项,也能够正常触发视图更新,从而实现了更好的响应式体验。

相关推荐
拉不动的猪1 天前
深入理解 Vue keep-alive:缓存本质、触发条件与生命周期对比
前端·javascript·vue.js
|晴 天|1 天前
WebAssembly:为前端插上性能的翅膀
前端·wasm
孟祥_成都1 天前
你可能不知道 react 组件中受控和非受控的秘密!
前端
火车叼位1 天前
ast-grep:结构化搜索与重构利器
前端
over6971 天前
深入理解 JavaScript 原型链与继承机制:从 instanceof 到多种继承模式
前端·javascript·面试
烂不烂问厨房1 天前
前端实现docx与pdf预览
前端·javascript·pdf
GDAL1 天前
Vue3 Computed 深入讲解(聚焦 Vue3 特性)
前端·javascript·vue.js
Moment1 天前
半年时间使用 Tiptap 开发一个和飞书差不多效果的协同文档 😍😍😍
前端·javascript·后端
前端加油站1 天前
记一个前端导出excel受限问题
前端·javascript
da_vinci_x1 天前
PS 生成式扩展:从 iPad 到带鱼屏,游戏立绘“全终端”适配流
前端·人工智能·游戏·ui·aigc·技术美术·游戏美术