VUE3.x之Proxy 我们为什么要使用Proxy
2024-10-20 18:56:25
Object.defineProperty 劫持数据
- 只是对对象的属性进行劫持
- 无法监听新增属性和删除属性
- 需要使用 vue.set, vue.delete
- 深层对象的劫持需要一次性递归
- 劫持数组时需要重写覆盖部分 Array.prototype 原生方法
Proxy 劫持数据
- 真正的对对象本身进行劫持
- 可以监听到对象新增删除属性
- 只在 getter 时才对对象的下一层进行劫持(优化了性能)
- 能正确监听原生数组方法
- 无法 polyfill 存在浏览器兼容问题
总结
Object.defineProperty 是对对象属性的劫持
Proxy 是对整个对象劫持
Object.defineProperty 无法监听新增和删除
Object.defineProperty 无法监听数组部分方法需要重写
Object.defineProperty 性能不好要对深层对象劫持要一次性递归
Proxy 能正确监听数组方法
Proxy 能正确监听对象新增删除属性
Proxy 只在 getter 时才进行对象下一层属性的劫持 性能优化
Proxy 兼容性不好
Object.defineProperty 和 Proxy
在 getter 时进行添加依赖 dep.addSub(watcher) 比如 绑定 view 层，在函数中使用
在 setter 时触发依赖通知 dep.notify() 比如 修改属性
最新文章
- Lua 学习笔记（十一）元表与元方法
- tachyon 集群容错
- [SQL SERVER系列]存储过程，游标和触发器实例[原创]
- 最严格的身份证校验（JavaScript版）
- 动态规划(背包问题)：HRBUST 1377 金明的预算方案
- linux 通过pid寻找程序路径的最简单命令
- Screen tearing
- “HK”的日常之ARP断网攻击
- linux配置分步安装lnmp环境----ghj
- 教你搞定ElasticSearch（head）
- termux 开启 sshd
- ASP.NET Core Docker jexus nginx部署-CentOS实践版
- PIL PNG格式通道问题的解决方法
- Idea基于maven搭建多模块单体结构项目
- MYSQL与TiDB的执行计划
- Spring webFlux：坐等spring-boot-starter-data-mysql-reactive
- QACT 在线调试 Android O
- 20145305 《网络对抗》MSF基础应用
- HTTP Header之Content-Type
- HDU1081 最大字段和 压缩数组（单调队列优化）