vue3为何放弃defineProperty，使用Proxy

最新推荐文章于 2024-08-12 09:24:35 发布
最新推荐文章于 2024-08-12 09:24:35 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： vue 文章标签： vue proxy
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40340478/article/details/107902452
版权
Vue3放弃了Object.defineProperty，转向使用Proxy实现数据响应。Proxy可以在目标对象上创建拦截层，全面覆盖属性的读写及更多操作，解决了Vue2中定义属性、监听数组变化等问题。Vue3使用Proxy提升了性能，减少了初始化时的数据遍历和内存管理成本。
摘要由CSDN通过智能技术生成

一、先聊聊双向绑定原理

Vue中监听数据变化，底层实现其实就是Vue面试者老生常谈的双向数据绑定。双向数据绑定，即view中的数据发生改变，这个变化会传递到model上；当model发生了改变，view中的数据也会对应更新。

实现双向绑定的方式有很多，像Angular是基于脏检查的双向绑定，“脏检查”是一种很朴素的监听方法，笔者不才，只是略有了解。脏检查其实是一种效率比较低的方式，Angular的scope模型上设置了一个监听队列，这个队列中会有很多个 w a t c h ， 监 听 它 在 负 责 的 m o d e l 中 是 否 有 发 生 变 化 。 A n g u l a r 中 存 在 着 两 个 函 数 watch，监听它在负责的model中是否有发生变化。Angular中存在着两个函数 watch，监听它在负责的model中是否有发生变化。Angular中存在着两个函数apply和 d i g e s t ， 其 中 digest，其中 digest，其中digest是一个局部更新的手段， a p p l

最低0.47元/天 解锁文章
秃头指非官
关注
专栏目录
为什么vue3要选用proxy，好处是什么？
hellocoder2029的博客
10-21 462
Proxy是对象的包装器，将代理上的操作转发到对象，并可以选择捕获其中一些操作。它可以包装任何类型的对象，包括类和函数。……然后，我们应该在所有地方使用proxy而不是target。代理没有自己的属性或方法。如果提供了捕捉器（trap），它将捕获操作，否则会将其转发给target对象。我们可以捕获get，set，deleteProperty 等操作函数调用（apply捕捉器）new操作（construct 捕捉器）Reflect 旨在补充 Proxy。对于任意Proxy。
【ES6】浅谈Vue3为什么使用Proxy取代defineProperty
hhhhhhhssss的博客
07-18 3060
文章目录前言一、Proxy是什么？get()set()二、Vue双向绑定实现原理三、Vue3为什么使用ProxydefineProperty缺陷Proxy的好处总结 前言 友友们大家好，vue3推出后大家有没有去看呢？博主是个性子急的人，哪能禁得住这诱惑。 经过博主粗略的阅读，我感觉vue3最大的变化之一便是使用Proxy取代defineProperty去实现数据劫持。 让我们想一想，为什么会这样呢？ 不知道大家有没有遇到过，在项目中改变数组或给对象添加属性，视图并没有相应式的更新。这其实就是defin
Vue.js 3.0 放弃 defineProperty，使用 Proxy 的原因
subsistent的博客
01-11 268
不可以在definedProperty的描述符里使用push, pop, shift, unshift,splice,sort, reverse方法。Proxy 返回一个proxy对象,我们可以只操作这个proxy对象达到目的,而 Object.defineProperty 只能遍历对象属性才能修改。因为definedProperty只能劫持一个属性，如果是引用数据类型，则监听这个数据的地址，如果想深度劫持，必须深层遍历嵌套的对象。Proxy 可以直接监听对象和数组的变化。从而Proxy达到了性能优化。
详解Vue3 中常用的 5 个组合式 API 方法的使用
最新发布
tigerhhzz的博客
08-12 975
在 Vue3 中，defineProps、defineEmits、defineExpose、defineOptions、defineSlots是一组新的功能函数，用于定义组件的属性、事件、暴露、选项和插槽。函数名称用途基本用法备注定义组件的属性（props）提供了基本的属性和事件处理通信功能定义组件可以发出的事件同上定义组件暴露给父组件的方法或属性提供了更高级的组件封装能力，适合需要高度自定义和复用的组件。在组合式 API 中设置组件的选项。
为什么Vue3.0不再使用defineProperty实现数据监听？
weixin_43881166的博客
08-04 773
为什么Vue3.0不再使用defineProperty实现数据监听？ 导 读 vue3.0中，响应式数据部分弃用了Object.defineProperty，使用Proxy来代替它。本文将主要通过以下方面来分析为什么vue选择弃用Object.defineProperty。 Object.defineProperty真的无法监测数组下标的变化吗？ 分析vue2.x中对数组Observe部分源码 对比Object.defineProperty和Proxy 一 无法监控到数组下标的变化？ 在一些
【前端知识之Vue3】defineProperty和proxy的区别
weixin_44337386的博客
08-09 928
本系列主要整理前端面试中需要掌握的知识点。本节介绍defineProperty和proxy的区别。
vue中defineProperty和Proxy的区别详解
01-22
Proxy的出现，给vue响应式带来了极大的便利，比如可以直接劫持数组、对象的改变，可以直接添加对象属性，但是兼容性可能会有些问题 Proxy可以劫持的数组的改变,defineProperty 需要变异 defineProperty 中劫持数组...
Vue的响应式原理：Vue如何使用Object.defineProperty或Proxy来追踪依赖，并在属性被访问和修改时通知变更。
哎 你看的博客
06-06 861
理解响应式系统的概念 什么是响应式系统 响应式系统的工作机制 Vue.js 的响应式实现 Vue 如何使用 Object.defineProperty 或 Proxy 来创建响应式对象 依赖收集：如何追踪依赖，以及为什么需要追踪依赖 变更通知：当依赖的属性被访问和修改时，Vue 如何通知变更 Vue.js 的响应式系统中的关键角色 Observer：负责将数据对象转换为响应式对象 Dep：用于管理一组依赖，当依赖发生变化时进行通知 Watcher：当依赖发生变化时更新视图 深入理解 Vue.js 的响应式
vue3为什么要用proxy替代defineProperty
01-18
关注vue的人都知道，vue3里面使用了proxy替换了defineProperty， 在使用vue2的时候，我们经常会碰到一个问题，添加新的对象属性obj.a = 1会无法被vue2劫持，必须使用vue2提供的$set方法来进行更新 这个的原因想必...
Vue3.0里为什么要用 Proxy API 替代 defineProperty API 原因？
JCat的博客
08-30 518
原理 Object.defineProperty只能遍历对象属性进行劫持； Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的； Proxy可以直接监听数组的变化（push、shift、splice）； Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的； Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9； 因为
02-vue源码分析之 vue3.0为何弃用Object.defineProperty而选择Proxy
全栈若城,专注知识分享
03-17 314
前言 在3.0中 双向绑定将会使用Proxy来代替2.x版本的Object.defineProperty，那么我们来看一下Proxy对比defineProperty优势在哪 首先这两种都是基于数据劫持实现的双向绑定 什么是数据劫持 当访问或者设置对象的属性的时候，触发相应的函数，并且返回或者设置属性的值。vue通过Object.defineProperty来劫持对象属性的getter和setter操作，当数据发生变化时发出通知。 const data= { name: '若城', sex:
Vue3.0初探：Proxy VS defineProperty
bangbanggangan的博客
10-21 291
前言 2019.10.5日发布了Vue3.0，到了2020年4月21日晚，Vue作者尤雨溪在B站直播分享了Vue.js 3.0 Beta最新进展，估计Vue3.0正式版也快出来了。 Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在很多方面进行了重构： 使用 Typescript 放弃 class 采用 function-based API 重构 complier 重构 virtual DOM 新的响应式机制 这次的分享就聊聊新的响应式机制，进入正文～ 回顾Vue2.x的
vue 原理以及defineProperty
qq_40072782的博客
04-25 1296
Object.defineProperty( 目标对象，属性，描述) 定义对象上属性的一些特性 var obj2 = {}; Object.defineProperty(obj2, "age", { value: 2, //属性值 writable: true, //对象上属性是否可修改 configurable: true, // 是否可配置，为false，不可(删、写、枚举...
Vue3 用 Proxy API 替代 defineProperty API 的那些事
D-的博客
12-13 582
只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${key}:${res}`)return res},console.log(`设置${key}:${value}`)return res},console.log(`删除${key}:${res}`)return res})Proxy。
Vue3 Beta版发布对于放弃 Object.defineProperty API你了解多少？(一）
ItStar
04-29 364
千呼万唤使出来Vue3 Beta 版本终于在前几天发布了，为了更好的初始化性能在新版本中Vue把数据对象侦测的API 从Object.defineProperty 换成 Proxy，这么...
Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？
weixin_43995143的博客
02-21 476
只能遍历对象属性进行劫持。Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的。Proxy可以直接监听数组的变化（pushshiftspliceProxy有多达13种拦截方法,不限于applyownKeyshas等等，这是不具备的正因为自身的缺陷，导致Vue2在实现响应式过程需要实现其他的方法辅助（如重写数组方法、增加额外setdelete方法）。// 数组重写});
Vue - Vue3介绍
weixin_39158686的博客
08-30 617
本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的mixin自定义hook的优势：复用代码让setup中的逻辑更清楚易懂当前求和为：{{ sum }}点我+1当点击时鼠标的坐标为: x:{{ point.x }}, y: {{ point.y }}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值