vue2学习笔记8 - 通过object.defineProperty理解Vue的响应式原理（setter/getter）

最新推荐文章于 2025-03-15 10:38:01 发布
最新推荐文章于 2025-03-15 10:38:01 发布
阅读量2.9k 收藏 63
点赞数 67
分类专栏： Vue 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_q_l/article/details/140436660
版权

前言

常看到说Vue是响应式的，或者说，它把data中的各种属性通过Object.defineProperty转换成setter/getter，以使得vue能够追踪这些属性的变更，从而适时通知页面重新渲染或者修改Model中的值，从而实现数据的双向传递。

1、初识Object.defineProperty

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
语法

Object.defineProperty(obj, prop, descriptor)

参数

  • obj: 要在其上定义属性的对象。

  • prop:  要定义或修改的属性的名称。

  • descriptor: 将被定义或修改的属性的描述符。

如下代码：定义一个person，其中有两个属性，name和address。想要添加一个属性age，可以像前两个属性一样添加，也可以使用Object.defineProperty添加。

<!DOCTYPE html>
<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
简述Vue 的响应式原理中 Object.defineProperty 有什 么缺陷 ？
youhebuke225的博客
05-31 661
Proxy 可以直接监听整个对象（包括数组和嵌套对象）的变化，而 Reflect 则提供了与 Object 类似的方法，但它们是作为函数来使用的，这意味着它们的行为可以被 Proxy 捕获并拦截。如果对象的属性值也是一个对象，那么当这个嵌套对象的内部属性发生变化时，Vue 无法直接检测到这个变化。只能监听对象已经存在的属性。如果向对象中添加新的属性或删除已有的属性，Vue 无法自动检测到这些变化。主要用于对象属性的监听，对于数组类型的属性，它不能直接监听数组元素的变化或数组长度的变化。
Vue的响应式原理：Vue如何使用Object.defineProperty或Proxy来追踪依赖，并在属性被访问和修改时通知变更。
哎 你看的博客
06-06 982
理解响应式系统的概念 什么是响应式系统 响应式系统的工作机制 Vue.js 的响应式实现 Vue 如何使用 Object.defineProperty 或 Proxy 来创建响应式对象 依赖收集：如何追踪依赖，以及为什么需要追踪依赖 变更通知：当依赖的属性被访问和修改时，Vue 如何通知变更 Vue.js 的响应式系统中的关键角色 Observer：负责将数据对象转换为响应式对象 Dep：用于管理一组依赖，当依赖发生变化时进行通知 Watcher：当依赖发生变化时更新视图 深入理解 Vue.js 的响应式
知识篇：（十）Vue2 的秘密武器：Object.defineProperty，原来响应式是这样实现的！
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-18 1339
虽然 Vue2 使用来实现响应式系统，但它背后的逻辑其实并不复杂。你可以把它想象成 Vue 在你的数据周围加了一层“监听器”，每次你动数据，它都能捕捉到，并且迅速更新界面。虽然有一些局限，但它在 Vue2 中的表现足够高效，成为了 Vue2 响应式系统的基石。希望通过这篇文章，你能够更轻松地理解 Vue2 的响应式机制。如果你还想更深入地了解 Vue2 的“魔法”，不妨自己动手实现一个简化版的响应式系统，体验一下其中的奥妙！有什么问题或想法，欢迎在评论区讨论哦~
Vue中的Object.defineProperty的理解
godkzz的博客
08-13 418
定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 一、直接添加 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ value:18, enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。 ...
VUE2与VUE3的底层监听工具对比：Object.defineProperty() (Vue 2) 与 Proxy (Vue 3)
最新发布
liuruiaaa的博客
03-15 715
VUE2与VUE3的底层监听工具对比：Object.defineProperty() (Vue 2) 与 Proxy (Vue 3)
vue2响应式原理之Object.defineProperty()方法
学如逆水行舟，不进则退！
05-13 3708
vue2响应式原理之Object.defineProperty()方法
Vue2——数据代理Object.defineProperty
mantou_riji的博客
07-15 433
文章目录Object.definePropertyObject.defineProperty特点 Object.defineProperty Object.defineProperty为对象添加属性. 三个参数：对象名，属性名，配置参数 eg: <script> let person ={ name:'张三', sex:'男', } // 为对象添加属性,三个参数：对象名，属性名，配置参数
vue2 响应式之Object.defineProperty
Mr.J的博客
07-30 695
这里写自定义目录标题1.前言2.Object.defineProperty（1）Object.defineProperty监听简单对象，例子如下（2）Object.defineProperty深度监听data变化（3）Object.defineProperty监听新增、删除属性（4）监听数组变化3.Object.defineProperty的缺点 以下内容是自己在学习过程中所记录，如有 1.前言 ​ 在日常的开发中，在data中定义的数据，可以在template中用*{{}}*在视图中显示，如下图所示 ​
Vue 的响应式原理中 Object.defineProperty 有什么缺陷? 为什么在Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty?React / Vue
weixin_47408560的博客
08-02 499
框架在进行 DOM diff 时，可以快速判断哪些项发生了变化、哪些项需要移动、添加或删除，从而高效地更新 DOM，提升性能。： 在初始化响应式系统时，Vue 需要遍历对象的所有属性来设置 getter 和 setter，这在对象较大时效率较低。不需要递归遍历对象所有属性进行绑定，可以在属性被访问时进行拦截，从而提高性能，特别是在处理深层嵌套对象时。的深度监听需要递归遍历对象的每一个属性，如果对象层级很深或者对象很大，初始化时会消耗大量的性能。例如，如果你在一个列表中有表单输入框，当重新排序列表时，有。
vue用Object.defineProperty手写一个简单的双向绑定的示例
08-27
Vue 使用 Object.defineProperty 实现简单的双向绑定 Vue 中的双向绑定是指视图层（View）和模型层（Model）之间的同步更新。使用 Object.defineProperty 可以手写一个简单的双向绑定示例。 什么是双向绑定？ ...
Vue2响应式原理（一）Object.defineProperty
平平无奇小码农的博客
03-18 2281
目录前言 为什么要学原理1、Object.defineProperty1.1、可枚举的1.2、可修改的1.3可删除的2、模拟“响应式” 前言 为什么要学原理 我们知道vue中的数据可以做到响应式，那么响应式的原理是什么大家知道吗？ 有同学可能会说，我管他原理是什么，我会用就行。但是其实不然，我们开发中经常会遇到，明明修改了一个数组或对象中的值，但是页面上却没有发生变化，一时半会也不知道解决办法，非常伤脑筋。 但是如果大家知道了响应式的原理，这个问题就是手到擒来，分分钟解决掉，接下来我们就开始学习吧~ 说到原
Object.defineProperty在Vue2双向绑定中的核心原理及应用
qq_53911056的博客
08-02 1210
本文主要讲解了Object.defineProperty方法的功能及在Vue中实现双向绑定的核心原理。Object.defineProperty在Vue 2.x的双向绑定中起核心作用，它通过数据劫持和依赖收集/派发更新的机制实现了数据模型与视图之间的自动同步。而在Vue 3.x中，采用了不同的实现方式（Proxy），但双向绑定的核心原理仍然相同。
简单讲解vue2.x（Object.defineProperty）
Qdc_k的博客
05-18 3453
1.vue2.x(Object.defineProperty) 1.1首先看下面代码 <script> let A = { a: 1, b: 2, c: ['a', 'b', 'c'] } let B = { } //在vue2.x中把 A 中的属性和值放在 B中，并且B中的属性在操作（例如：修改，设置）时都可以进行拦截 Object.k
由Vue引发的getter和setter思考
weixin_30606669的博客
10-25 657
公司的新项目决定使用Vue.js来做，当我打印出Vue实例下的data对象里的属性时，发现了一个有趣的事情： 它的每个属性都有两个相对应的get和set方法，我觉的这是多此一举的，于是去网上查了查Vue双向绑定的实现原理，才发现它和Angular.js双向绑定的实现原理完全不同，Angular是用的数据脏检测，当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图。而Vue...
VueObject.defineProperty
JunChow
09-16 240
VUE Vue.js采用Object.defineProperty的getter和setter，并结合观察者模式来实现数据绑定。当把一个普通的JS对象传递给Vue实例的data选项时，Vue将遍历它的属性，并使用Object.defineProperty将其转化为getter和setter。用户看不到getter和setter，而在内部它们让Vue追踪依赖，在属性被访问...
vue的Object.defineProperty
qq_37326058的博客
01-14 268
Object.defineProperty，这个和wpf框架中的属性极其相似，我们可以在model中将变量注册为属性，并且添加command与数据绑定，如果属性的值变化，则会触发相关事件的执行。 甚至认为wpf的思想和vue的很多思想是一样的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
【Vue】 object.defineProperty
qq_42267036的博客
03-20 555
1、object.defineProperty 给一个对象定义一个新的属性或者在修改一个对象现有的属性，并返回这个对象语法： Object.defineProperty(参数1，参数2，参数3)　　参数1：目标对象　　参数2：要修改或者添加的属性名称　　参数3：目标对象属性的一些特征 (是一个对象)　　　　　　参数1：value:属性值　　　　　　参数2：writable：对象属性值是否可以被...
vue之Object.defineProperty()
weixin_30685029的博客
07-30 166
了解Object.defineProerty()方法 关于Object.defineProperty()方法的解释，理解Object.defineProperty的作用这篇文章做了很详细的概述 关于vue双向绑定中Object.defineProperty()的应用 vue双向绑定的实现及原理 vue双向绑定的实现原理Obeject.defineProperty vue....
vue底层原理：object.defineProperty详解
weixin_42161050的博客
03-30 1903
Object.defineProperty
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值