vuez 与 Vue3 响应式比较

Vue2 的响应式

对象:通过 defineProperty 对对象的已有属性值的读取和修改进行劫持(监视/拦被)。

数组:通过重写数组、更新数组等一系列更新元素的方法来实现元素修改的劫持。

存在的问题如下:

  1. 对象直接新添加属性或删除已有属性,界面不会自动更新。
  2. 数组直接通过下标替换元素或更新 length,界面不会自动更新 arr[O]= xx。

Vue3 的响应式

通过 Proxy(代理):拦截对data 任意属性的任意(13种)操作,包括属性值的读写、属性的添加、属性的删除等。

通过 Reflect(反射):动态地对被代理对象的相应属性进行特定的操作。

Proxy 官方文档:

https://developer.mozilla.org/zh-CN/docs/ Web/JavaScript/ Reference/Global_Objects/Proxy

Reflect 官方文档:

https:// developer. mozilla.org/zh-CN/ docs/ Web/ JavaScript/ Reference/Global_Objects/Reflect

相关推荐
温宇飞3 分钟前
Web Abort API - AbortSignal 与 AbortController
前端
Tomoon4 分钟前
前端开发者的全栈逆袭
前端
Filotimo_38 分钟前
2.CSS3.(3).html
前端·css3
whyfail42 分钟前
React v19.2版本
前端·javascript·react.js
慧慧吖@1 小时前
react基础
前端·javascript·react.js
浪裡遊1 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
DiXinWang1 小时前
关闭谷歌浏览器提示“若要接收后续 Google Chrome 更新,您需使用 Windows 10 或更高版本”的方法
前端·chrome
CoderYanger1 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
muyouking112 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux