Vue源码解析--实现观察者Observer

最新推荐文章于 2023-06-18 23:28:03 发布
最新推荐文章于 2023-06-18 23:28:03 发布
阅读量213 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54904533/article/details/116429568
版权
本文深入解析Vue的Observer实现，通过Object.defineProperty的数据劫持，结合订阅者和发布者模式，阐述当数据变化时如何通知Watcher进行视图更新，实现MVVM的双向绑定效果。初始化时收集属性上的Watcher，数据变更时触发更新流程。
摘要由CSDN通过智能技术生成

Vue源码解析--实现观察者OBserver

MVVM实现原理图

 

vue采用数据劫持配合订阅者和发布者模式的方式 ,

通过   Object.defineProperty 的setter 和  getter  对数据进行劫持 , 

在数据变化时, 发布消息给依赖器 Dep(订阅者),  去通知观察者Watcher  做出对应的回调函数 , 进行视图更新

MVVM 作为绑定入口 , 整合Observer , Compile 和Watcher  三者 , Observer来监听model数据变化 , 

Compile来解析编译模板指令 , 最终利用Watcher 搭建起 Compile , Observer , Watcher 之间的通信桥梁 , 

最低0.47元/天 解锁文章
Bpab
关注
Vue观察者模式
m0_58875326的博客
04-22 1829
简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人，如有错误求大佬指出~求教💝 情景复现 大佬提问：“什么是观察者模式？” 我的回答：“观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象。体现在Vue中就是在在get数据的时候进行依赖收集，在set数据的时候会发布消息通知订阅者，触发监听回调，更新视图。” 例如：抖音上的小杨哥，当小杨哥在抖音开启直播时，会自动通知所有的粉丝。 小杨哥：直播间海量福利商品，赶紧来抢购吧！ 小杨哥为目标.
MVVM源码注释
weixin_49757430的博客
04-29 186
MVVM代码注释如下： function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; //保存this 为了之后使用this的时候保证this指向的正确性 var me = this; .
简单实现Vue的observer和watcher
本杰明的博客
12-21 965
非庖丁瞎解牛系列～ ＝。＝ 在日常项目开发的时候，我们将js对象传给vue实例中的data选项，来作为其更新视图的基础，事实上是vue将会遍历它的属性，用Object.defineProperty 设置它们的 get/set，从而让 data 的属性能够响应数据变化： Object.defineProperty(obj, name, { // 获取值的时候先置入vm的_data属性对象中
Vue学习之数据监听Observer类实现
Dyanfee的博客
04-28 591
Vue学习之数据监听Observer类实现 创建脚本文件 文件名：Observer.js 在index.html中引入脚本文件<script src="Observer.js"></script> 创建Observer类，并在构造函数中传入Vue实例的data数据。 class Observer { constructor(data) { this.observer(data); } // 实现数据变化监听 observer(data)
Vue中观察者模式的实现
weixin_33928467的博客
10-23 383
Vue中实现观察者模式的方法可以有三种： 1、v-on方法 exp: <div id='test'> <button v-on:event='functionName'>buttonName</button> </div> var vm = new Vue（｛ 　　el:'#test', 　　method:{ 　　　　functi...
Vue源码解析--实现一个指令解析器 Compile
weixin_54904533的博客
05-05 271
结合 Vue源码解析--实现一个指令解析器 Compile基础上在解析指令渲染视图时添加观察者 并实现Proxy代理 和 input 视图驱动数据 MVue.js const compileUtil = { getVal(expr, vm) { return expr.split('.').reduce((data, currentVal) => { return data[currentVal] }, vm.$da...
vue源码解析如何实现一个MVVM框架
08-10
Vue.js通过数据劫持（Object.defineProperty）和观察者（Observer）等技术实现了这一模式。 1. 数据绑定：在Vue中，所有声明的data属性都会被转化为响应式对象。这是通过`observe`函数实现的，它会遍历对象的所有...
vue2.6.10-analysis:原始解析-源码解析
03-24
在`src/core/observer/index.js`中，Vue创建了一个观察者对象，用于监听数据变化。当数据发生变化时，依赖于该数据的视图会自动更新。这一过程通过`Dep`（依赖）和`Watcher`（观察者）类实现，确保了最小化的DOM操作...
vue-source-code:手写vue源码-vue source code
03-24
这一功能主要由`Dep`（依赖）和`Observer`（观察者）实现，它们监控数据变化，并通过`Watcher`（监视器）将更新传递到视图层。 虚拟DOM是另一个关键概念，Vue在内存中创建了一个抽象的DOM树，当数据改变时，Vue会计...
Vue 源码分析之 Observer实现过程
08-27
主要介绍了 Vue 源码分析之 Observer实现过程，Observer 最主要的作用就是实现了touch -Data(getter) - Collect as Dependency这段过程，也就是依赖收集的过程，感兴趣的朋友跟随脚本之家小编一起学习吧
Vue中的观察者模式
weixin_48358407的博客
11-29 636
这篇文章的再次看到下面的代码是不是有种似曾相识感觉，在这里可比那块的方便多了，可以通过depend方法自动传入观察者类的构造函数中的集合中，并同时将该观察者添加到目标类中的观察者实例容器中。这两篇文章看起，这样子各位看官对Vue中的观察者模式理解起来就会简单而且深刻很多。不要在意{{userName}}没有渲染上，让我们看控制台哈哈哈。的有没有发现上面部分代码和那篇文章比是不是有什么不同。这篇文章那你就不会对下面的代码感到陌生。各位看官有兴趣的可以先从。
vue observer 源码学习
weixin_33727510的博客
07-11 145
一、版本：2.5.9 二、建议 vue最重要的应该就是响应式更新了,刚开始接触vue或多或少都能从官方文档或者其他地方知道vue响应式更新依赖于Object.defineProperty()方法,这个方法在MDN上有详细讲解,不过,如果是初学者的话,直接去看响应式更新源码还有点难度的,最好是先用项目练一遍,对vue有个相对熟悉的了解,然后...
Vue-Watcher观察者源码详解
comedyking的博客
06-08 1908
源码调试地址 https://github.com/KingComedy/vue-debugger 什么是Watcher Watcher是Vue中的观察者类，主要任务是：观察Vue组件中的属性，当属性更新时作相应的操作，即实例化时传入的回调函数 在Vue的对属性做响应式处理时，会收集每个属性的依赖，即每个属性所依赖的watcher，当属性更新时，通知watcher执行更新dom操作。 Watcher有三种类型的，一个是计算属性computed创建的computedWatcher，一个是侦听器wat
Vue当中的观察者模式（observer）
banzhangshenlin的博客
07-07 3359
观察者模式： 当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，自动重新更新获取这个变量的新值。 示例代码： <script> //观察者(observer)模式: 当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，让他们自动重新获得这个变量的新值。 var data={ money:1000, setMoney(money){ this.money=money; //只要money被修改，就要调用notifyAll() this.noti
php observer,Vue中如何实现Observer
weixin_32584807的博客
03-26 148
这次给大家带来Vue中如何实现Observer，Vue中实现Observer的注意事项有哪些，下面就是实战案例，一起来看一下。导语：本文是对 Vue 官方文档深入响应式原理(https://cn.vuejs.org/v2/guide/reactivity.html)的理解，并通过源码还原实现过程。响应式原理可分为两步，依赖收集的过程与触发-重新渲染的过程。依赖收集的过程，有三个很重要的类，分别是 ...
vue源码阅读之Observer
最新发布
风烟
06-18 726
我们上次学习了vue数据驱动的概念，以及简单的vue怎么知道数据更新，然后采取行动的。今天我们就来继续深入学习，vue怎么把数据和视图给绑定在一起的，数据发生变化，视图怎么会自动发生变化的。
vue响应式原理：观察者模式
weixin_39805244的博客
03-13 2409
作为计算机工程师，框架是提高开发效率的重要工具。理解框架的核心原理，有助于更好地使用它和定位问题。同时，一个优秀的框架，其设计方案和实现原理也是值得我们学习和借鉴的。本文将通过实现一个简单的响应式系统，来理解vue.js的响应式原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值