vue源码学习——观察者模式

最新推荐文章于 2024-06-24 13:59:39 发布
最新推荐文章于 2024-06-24 13:59:39 发布
阅读量547 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/titoni_yunruohan/article/details/83585619
版权

情景：接触过vue的同学都知道，我们曾经都很好奇为什么vue能这么方便的进行数据处理，当一个对象的某个状态改变之后，只要依赖这个数据显示的部分也会发生改变，如果你依旧很好奇，那么今天你就可以了解一下实现的原理

  • 什么是观察者模式​​​​​​​

   官方解释是这样的......

   观察者模式（Observer）：通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖于它的对象都会得到通知并自动更新，解决了主体对象与观察者之间功能的耦合

   生活简例可以这样解释......

   上面的模式中涉及俩个人，一个是警察派去的卧底L，一个是警察局中和卧底对接的人H，一旦L有消息发出，H必然要采取行动，即可以把L发出消息的动作定义为发布，H随时待命成为订阅，vue中的model就是发布者，view是观察者

  • vue中什么时候在用观察者模式
  • vue中的体现

          

 

Yunruohan
关注
专栏目录
Vue观察者模式
m0_58875326的博客
04-22 1819
简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人，如有错误求大佬指出~求教💝 情景复现 大佬提问：“什么是观察者模式？” 我的回答：“观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象。体现在Vue中就是在在get数据的时候进行依赖收集，在set数据的时候会发布消息通知订阅者，触发监听回调，更新视图。” 例如：抖音上的小杨哥，当小杨哥在抖音开启直播时，会自动通知所有的粉丝。 小杨哥：直播间海量福利商品，赶紧来抢购吧！ 小杨哥为目标.
vue -观察者模式
xihuanLilia的博客
05-27 1276
观察者模式vue中的观察者模式什么是观察者模式 vue中的观察者模式 vue2 底成的原理是 object.defineproperty（） 配合观察者模式 object.defineproperty（）对数据可以进行劫持 当数据发生变化的时候 需要通知被依赖的地方 这时候 就需要用上观察者模式 什么是观察者模式 观察者模式简单的说就是 一个对象被多个对象依赖， 会自动更新所有依赖的对象 比如说 游戏发布了一次更新 通知了所有玩家 这时候 玩家就是观察者 游戏就是被观察者 或者说目标 ...
从vue源码看观察者模式
weixin_33795833的博客
01-28 337
2019独角兽企业重金招聘Python工程师标准>>> ...
vue2/vue3分别使用观察者模式和发布订阅模式的区别
最新发布
weixin_65644264的博客
06-24 612
观察者模式是一种行为设计模式，它定义了对象间的一对多依赖关系。当一个对象的状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。Vue 2主要使用观察者模式实现响应式系统，通过实现数据属性的拦截和依赖收集。Vue 3使用Proxy结合观察者模式和发布订阅模式，实现更高效和灵活的响应式系统，同时通过组合式 API 提供更强大的响应式数据处理能力。
vue观察模式浅析
weixin_34067102的博客
09-23 116
以下是我对vue观察者模式的理解:github L6zt 加入tip 2018-10-14 最近又看到《js设计模式设计》书 推荐去搂搂不要对框架的偏见, 你真的了解jquery、angular、react 等等，框架是什么只是工具而已。 你用过jquery的 trigger、on、off 事件绑定的方法吗？事实上 vue 不过也是这...
vue中的观察者模式
接着奏乐接着舞的博客
07-03 2034
观察者模式（发布-订阅模式）的含义，掌握其写法，学习套路，观察者模式就是解决一类问题的最优解
Vue源码分析——Vue的构造函数分解
yolo0927的前端学习之路
10-15 2825
大概按照自己的思路与理解，解读了下 Vue 构造函数的设计过程，本人也是在深入学习阶段，还是一句，多去看看设计思想，而不是琢磨某个api， 思想才是学习中最重要的。
Vue源码学习笔记——组件挂载及创建
connie_1990的博客
09-04 422
准备工作 备注：案例中使用的vue版本全部为2.6.10 git clone https://github.com/vuejs/vue.git npm install 进入package.json，在script中增加"dev:read"命令,具体如下 "scripts": { // 方便源码阅读 "dev:read": "rollup -w -c scripts/config...
vue2源码学习，附上一些注释
03-03
这是通过`Dep`（依赖）和`Watcher`（观察者）实现的。当你在模板中使用`v-bind`或`v-model`指令时，Vue会自动创建对应的`Watcher`对象，并在数据变化时通知它们，触发视图更新。 接下来，我们要了解虚拟DOM...
Day7：Vue入门学习——传智播客学习笔记【微服务电商】
weixin_43895667的博客
02-21 1151
本节依旧是前端内容，但还是了解一下基础的入门知识 学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 0. 前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们...
Vue 源码解读（3）—— 响应式原理
Guolicheng_的博客
08-05 446
前言 上一篇文章 Vue 源码解读（2）—— Vue 初始化过程 详细讲解了 Vue 的初始化过程，明白了 new Vue(options) 都做了什么，其中关于 数据响应式 的实现用一句话简单的带过，而这篇文章则会详细讲解 Vue 数据响应式的实现原理。 目标 深入理解 Vue 数据响应式原理。 methods、computed 和 watch 有什么区别？ 源码解读 经过上一篇文章的学习，相信关于 响应式原理 源码阅读的入口位置大家都已经知道了，就是初始化过程中处理数据响应式这一步，即调用
浅谈Vue中的观察者模式
huajiwan的博客
09-02 630
如今各种编程语言（如java、python、c++、c、JavaScript等）各领风骚，但在计算机软件开发领域的深处，实际上有一套非常成熟的规范或说明书，它就是设计模式，它的存在总结并统一了特定应用场景下的核心处理思想，本节从设计模式的定义和设计模式的基本内容进行展开介绍。发布者/目标：租房中介观察者/订阅者：关注房源的人（潜在租客）房源状态改变后，中介会通知潜在租客们信号中心： 租房中介接收并记录潜在租户的注册信息向潜在租户发送租房信息订阅者：潜在租户向租房中介注册租房需求。
Vue中的观察者模式
weixin_48358407的博客
11-29 620
这篇文章的再次看到下面的代码是不是有种似曾相识感觉，在这里可比那块的方便多了，可以通过depend方法自动传入观察者类的构造函数中的集合中，并同时将该观察者添加到目标类中的观察者实例容器中。这两篇文章看起，这样子各位看官对Vue中的观察者模式理解起来就会简单而且深刻很多。不要在意{{userName}}没有渲染上，让我们看控制台哈哈哈。的有没有发现上面部分代码和那篇文章比是不是有什么不同。这篇文章那你就不会对下面的代码感到陌生。各位看官有兴趣的可以先从。
VUE源码的观察者模式解析
weixin_30583563的博客
10-26 341
源码地址：https://github.com/vuejs/vue/blob/dev/src/core/observer/dep.js 　　　　　https://github.com/vuejs/vue/blob/dev/src/core/observer/watcher.js 1.观察者模式 观察者模式（Observer）：通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖...
vue2框架简易版响应式设计（观察者模式）
coding...
12-03 739
添加数据劫持方法// Vue.js//Observer专门用于数据劫持data;get() {console.log(`使用了${key}这个属性`);},set(val) {console.log(`修改了${key}属性`, val);})walk() {})age:11对于data来说，我们自己数据劫持存了一份在$data，并且还将$data中每个数据都再次存在了vue实例上，创建Vue类。//$data上的所有数据都要数据劫持//$data存放所有的数据。
Vue源码学习 -- 响应式原理之观察者模式
qq_36291747的博客
04-26 2000
1. 观察者模式 概念 观察者模式又被称为 发布-订阅 模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。 优点 观察者与被观察者是抽象耦合的 建立了一套触发机制 缺点 被观察者有很多的观察者时，通知更新这一过程会花费很多的时间 观察者和被观察者之间存在循环依赖的话，可能导致系统奔溃 现实中的例子 ......
观察者模式以及在 vue 中的应用
weixin_43890122的博客
05-17 423
（本文是基于《Head First 设计模式》观察者模式的学习笔记） 引例：设计天气站 我司最近接到一笔订单，要求我们在 WeatherData 对象上建立一个应用。要求如下： 该应用需要有三种布告板，分别显示当前的状况（currentConditions），气象统计（statistics）以及简单的预报（forecast），而且必须是实时更新的。 此外，这得是一个可扩张的气象站，甲方希望公布一组 API，好让其他开发人员可以写出自己的气象布告板，并插入到此应用中。希望我司能够提供这样的 API。 .
理解 Vue 中的观察者
分享身边生活经验blog
10-15 581
Vue 中的观察者是一个特殊的功能，它允许我们观察一些数据并在数据发生变化时执行特定的操作。这是一种更通用的方式来观察和响应 Vue 实例中的数据变化。有了观察者，我们不仅可以观察属性并执行自定义操作；我们还可以访问此特定属性正在更改的旧值，以及它已更改为的新值。
Vue响应式原理：观察者模式详解与实现
Vue源码学习——响应式原理之观察者模式深入解析 Vue.js采用观察者模式作为其核心的响应式机制，这是一种设计模式，也称为发布-订阅模式。在这个模式中，对象之间的关系是一对多的，即一个主题(subject)可以有多个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值