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() 比如 修改属性

DEMO链接

VUE3.x之Proxy 我们为什么要使用Proxy的更多相关文章

  1. Vue3.0 响应式数据原理：ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  2. 正向代理 forward proxy、反向代理 reverse proxy、透明代理 transparent proxy

    https://zh.wikipedia.org/wiki/反向代理 反向代理在计算机网络中是代理服务器的一种.服务器根据客户端的请求,从其关系的一组或多组后端服务器(如Web服务器)上获取资源,然后 ...

  3. Chromuim proxy Api 提取代里proxy调用Chrome隐身多窗口 多COOKIE 工具

    Chromuim proxy Api提取proxy调用Chrome隐身 多COOKIES 多窗口工具每一个代理拥有一个独立的窗口和USERDATA 独立COOKIES 伪装UA UA:<scri ...

  4. 正向代理 forward proxy、反向代理 reverse proxy、透明代理 transparent proxy nginx反向代理原理和配置讲解 防止外部客户机获取内部内容服务器的重定向 URL 缓存命中

    [大型网站技术实践]初级篇:借助Nginx搭建反向代理服务器 - Edison Chou - 博客园http://www.cnblogs.com/edisonchou/p/4126742.html 图 ...

  5. Vue3都使用Proxy了，你更应该了解Proxy

    vue3.0的pre-alpha版代码已经开源了,就像作者之前放出的消息一样,其数据响应这一部分已经由ES6的Proxy来代替Object.defineProperty实现,感兴趣的同学可以看其实现源 ...

  6. vue3中的通过proxy实现双向数据绑定的原理

    1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种 ...

  7. 第三十六篇:vue3响应式(关于Proxy代理对象,Reflect反射对象)

    好家伙,这个有点难. 1.代理对象Proxy Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找.赋值.枚举.函数调用等). 拦截对象中任意属性的变化,包括:查get, ...

  8. es6学习笔记-proxy对象

    前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...

  9. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  10. 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

    利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说 ...

随机推荐

  1. mysql之字段约束-第五篇

    数据库的完整性约束是为了在数据库应用中保证数据的一致性和正确性.所以在创建数据表时定义其字段的约束是非常有必要的. 主键约束 主键(primary key)是一个列或者列的组合,其值能唯一地标识表中的 ...

  2. react+antd pro实现【列表可实时行内编辑】的弹窗表单组件

    纯列表版效果展示: ① 初始无值,展示为唤醒按钮+文案外链 ②点击按钮唤醒弹窗(简易版示意图) ③配置后 可编辑表格组件文档: https://procomponents.ant.design/com ...

  3. element-ui switch

    <el-tooltip :content="'Switch value: ' + value" placement="top"> <el-sw ...

  4. 3DMAX2023卸载方法，如何完全彻底卸载删除清理干净3dmax各种残留注册表和文件？【转载】

    3dmax2023卸载重新安装方法,使用清理卸载工具箱完全彻底删除干净3dmax2023各种残留注册表和文件.3dmax2023显示已安装或者报错出现提示安装未完成某些产品无法安装的问题,怎么完全彻底 ...

  5. java实现AES/CBC/pack5padding加解密算法

    最近要测试一个借口,借口的传值参数是使用AES加密,偏移量为0000000000000000,秘钥:12345678901234567890123456789012,加密后内容转成16进制发送,用网上 ...

  6. JAVA - 判断两个浮点数相等

    JAVA - 判断两个浮点数相等 背景知识 float型和double型是JAVA的基本类型,用于浮点数表示,在JAVA中float型占4个字节32位,double型占8个字节64位,一般比较适合用于 ...

  7. 求小于N的最大素数

    问题 求小于N的最大素数 分析 枚举:从可能的集合中一一列举各元素 枚举过程中需要考虑的问题: 给出解空间 减少搜索的空间 采用合适的搜索顺序 枚举关键字(枚举核心):减少规模 代码实现 1 impo ...

  8. C++的万能引用解析

    C++11除了带来了右值引用以外,还引入了一种称为"万能引用"的语法:通过"万能引用",对某型别的引用T&&,既可以表达右值引用,也可以表达左值 ...

  9. Hyperkernel验证实验的复现与z3环境初识

    Hyperkernel验证实验的复现与z3环境初识 前言 建议顺序阅读本文!禁止转载.--@CarpVexing(https://www.cnblogs.com/CarpVexing/p/159483 ...

  10. C语言 (数据结构)在顺序表中用二分查找和冒泡排序算法

    main.c: #include <stdio.h> #include <stdlib.h> #include "SequenceList.h" int m ...