vue2数据响应式原理——依赖收集和发布订阅

已于 2023-03-03 00:20:35 修改
阅读量7.2k 收藏 4
点赞数 4
分类专栏： Vue Vue核心原理解析 文章标签： javascript react.js 前端
于 2022-05-16 16:55:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51969330/article/details/124803028
版权
本文深入探讨Vue2数据响应式的依赖收集和发布订阅机制。解释了依赖的概念，Watcher类的作用，以及Observer和Dep如何协同工作实现数据变化的监听和通知。通过分析关键代码，阐述了数据变化时如何触发依赖更新，以及Vue2响应式系统存在的问题和解决方案。
摘要由CSDN通过智能技术生成

🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）
🖥️ TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）
🧑‍💼个人简介：大三学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！

在这里插入图片描述

目录

Baker-Chen
关注
专栏目录
vue2数据响应式原理——数据劫持（初始篇）
前端之行，任重道远！
05-09 3759
深入浅出带你摸透vue2数据响应式原理
vue双向绑定原理
weixin_39808181的博客
02-21 612
双向绑定原理： 用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的；数组是通过重写数组方法（push shift splice unshift sort reserve）进行重写（只有被defineProperty劫持的方法才会被重写）。 Object.defineProperty{ obj, //定义属性的对象 prop, //要定义或者修改的属性的名称 descriptor, //将被定义或修改属性的描述符【核心】 } v
【探究Vue原理】对Vue2.0的数据响应式的探究——依赖收集
杨光的博客
09-02 423
1. pushTarget(this) 2. value = this.getter.call(vm, vm) 3. popTarget() 不知道读者还记不记得我上篇文章提到的defineReactive函数，在这个函数内部有这么一段代码： /* 下面对当前属性做响应式改造，本质上就是对属性的访问和赋值操作做拦截。 当用户将来通过this.xxx访问某个响应式的对象的时候，就会触发它...
简单实现vue中的依赖收集与响应
weixin_33809981的博客
02-02 168
开始 声明一个对象man，可以视为vue中的data let man = { height: 180, weight: 70, wealth: 100000000 } 复制代码添加Observer 作用在于将参数对象的属性变为响应式，只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例，将man作为参数扔进去。这里的proxyData是将man的属性代理到以man...
vue 2.x源码随手记 --Vue的依赖收集
screaming_color的博客
04-10 283
引文：看源码的随手记 Vue的依赖收集 关键： initProps initData observer() class Observer 数组的响应式(重写数组的原型链上的方法push\shift…) 以及 一般的响应式 但都是通过Object.definedProperty Object.definedProperty（setter getter） 首先我们有一个Dep类,主要用来存放观...
vue3数据响应式与依赖收集
一个无聊的程序员的琐碎
07-20 580
vue3 数据响应式整体思路 使用new Proxy对响应式数据进行代理 get函数 触发trace添加依赖 如果get的数据是对象，执行递归new Proxy代理（此处是懒调用，只有对象被使用才会执行new Proxy代理） set函数 触发trigger执行get函数收集的相关依赖 vue3响应式和vue2的变化 从Object.definePrototype =》 new Proxy 优点 对整个对象使用Proxy代理，并且对象是懒调用（未被使用的对象，不会添加代理），免去整
vue2响应式原理之依赖收集
学如逆水行舟，不进则退！
06-05 1467
vue2响应式原理之递归侦测全部对象属性，讲述了对象中嵌套对象或者数组的深层嵌套进行数据劫持使对象全部属性变得响应式，这一篇将讲述如果数据发生变化通过getter和sertter进行依赖收集通知Watcher进行视图更新 ......
vue2计算属性依赖收集的问题
attengtiong的博客
08-11 353
vue2计算属性依赖收集问题
vue2 数据响应式原理——数据劫持（对象篇）
m0_73257876的博客
09-17 639
判断到obj不含__ob__这个属性，知道了obj还不是响应式数据，所以在observe函数内执行了（因为obj是传入的参数，所以之后的value都是指这个obj）将new出的这个Observer实例通过def函数绑定到了obj的__ob__不可枚举属性上，然后调用walk(obj)遍历obj上含有的第一层属性，逐个执行（k指遍历到的属性）将obj上的这些属性（上一步遍历到的所有k）变成了响应式数据，)内又执行了使用observe对k属性的值再次执行这整个过程，形成一个循环的过程。自此obj。
vue2数据响应式原理——数据劫持（数组篇）
前端之行，任重道远！
05-16 6624
vue2数据响应式原理之数据劫持（数组篇）前言数据劫持（数组篇）array.jsObserver.js 前言 通过前两篇的学习，想必你已经对Object.defineProperty()和对象的侦听有了一定的理解，现在就让我们来继续研究如何使用Object.defineProperty()来对数组进行数据劫持，以便我们能够侦听到数组的变化。 数据劫持（数组篇） 首先新建一个： array.js import { def } from "./utils.js"; //获取数组的原型 const arrayP.
Vue.js响应式原理（三）——发布订阅模式和观察者模式
xiaozidewawa的博客
09-03 3707
发布/订阅模式 订阅者 发布者 信号中心 我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心发布（publish）一个信号，其他任务可以向信号中心订阅（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”（publish-subscribe pattern） 常见的发布/订阅模式：Vue 的自定义事件、node的事件处理机制。 let vm = new Vue() vm.$on('dataChange', () => { console.lo
vue2数据绑定以及收集依赖
pspxuan的博客
02-07 475
Watcher 依赖收集器 以及通知更新的喇叭，可以收集并管理 Watcher。他们之间的关系是多对多的，可以相互依赖更新。注意，此时只是定义了 get 方法，并没有执行收集依赖的过程，所有此时还没有根据 data 建立 对应的 Watcher。目标对象，所有监听的数据会生成一个 Watcher 实例，一 一对应。initState 中会执行 observer， 劫持所有数据，封装一层方法，如下。数组： 重写原型上的方法，用来劫持数据的改变。主要是用来数据绑定，以及定义收集依赖的方法。
vue响应式，数据劫持&发布订阅实现
小易不止于搬砖的博客
02-07 571
vue数据双向绑定原理： 数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 observer：每个对象的属性，添加到订阅者容器Dependency(Dep)中，当数据发生变化的时候发出notice通知。 Watcher：某个属性数据的监听者/订阅者，一旦数据有变化，它会通知指令(directive)重新编译模板并渲染UI Dep对象: 订阅
vue响应式依赖的两种技术之-发布订阅模式的实现
codingWeb的博客
02-05 367
vue响应式依赖的两种技术： 1.Vue中修改数据，Vue内部是如何监听message数据的变化的 Object.defineProperty() -> 监听对象属性的改变 2.当数据发生改变，Vue是如何知道要通知哪些数据，界面发生刷新 发布订阅模式 继续上篇个人博客，实现下发布订阅模式， 发布订阅模式实现的时候有个坑：数组坍陷问题 这里采用es6的新语法封装发布订阅类，使用for...
1.浅谈vue响应式原理及发布订阅模式和观察者模式
weixin_42327537的博客
11-02 478
let data={ msg:'hello', count:10 } let vm={} proxyData(data) function proxyData(data){ Object.keys(data).forEach(key=>{ Object.defineProperty(vm,key,{ e.
vue2源码解析——vue中如何进行依赖收集、响应式原理
最新发布
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
04-03 1546
vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集，就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里，所以，一个属性可能对应多个watcher。因此，在vue2中，属性要通过dep对象管理属性依赖的watcher。在初始化时编译器生成render函数，此时触发属性的依赖收集dep.depend。组件挂载完成后，操作页面，当数据变化后，对应的响应时对象会调用dep.notify方法通知自己对应的watcher更新。
手把手写vue2.0发布者订阅模式
weixin_44694172的博客
01-12 405
好多同学对响应式理解不够明确，本章代码详解响应式的源码，包括数据联动，订阅器，发布器都想详细的见解，不喜勿喷！！！谢谢大家支持 JS // 订阅器模型 let Dep={ // 容器 clientlist:{}, // 添加订阅 listen:function(key,fn){ if(!this.clientlist[key]){//如果没有容器为空，就给它设置默认值 this.
Vue2收集依赖的时机以及生命周期解读
qq_53157160的博客
07-15 490
执行_render把vnode映射到真实dom，在这个方法中会访问到所依赖的数据，触发getter，然后判断Dep.target是否存在，我们在pushTarget中已经启用了依赖收集，所以这个时候就会通过判断，执行depend方法，调用Watcher的addDep方法，在addDep方法中，首先获取dep的id，然后判断newDepIds数组中是否存在这个id，防止重复收集依赖。显然，beforeCreate的钩子函数当中就不能获取到props，data当中的值，也不能调用methods当中的方法。...
Vue数据响应式原理：Vue2与Vue3的区别
Vue2通过`Dep`类来管理依赖，每个响应式数据都有一个对应的`Dep`实例，用来存储其依赖的计算属性或渲染函数。在访问响应式数据时，会将当前的执行上下文（通常是Vue组件的`Watcher`实例）添加到`Dep`的观察者列表。...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Baker-Chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值