Vue中的Observer类

最新推荐文章于 2025-05-30 09:00:00 发布
原创 最新推荐文章于 2025-05-30 09:00:00 发布 · 326 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

Observer 类

通过调用链可以发现在 initData 开始，由 Observer 开始对 data 的每个 key 值进行 set、get 的拦截监听 （利用 Object.defineProperty），同时可以发现在 defineReactive 中对每个 key 值的拦截监听都会创建一个独立的 Dep 对象，在 get 的时候调用 dep.depend() 进行依赖收集，在 set 的时候调用 dep.notify() 进行派发更新（通知观察者更新视图），我们的数据就是被观察者



 

vue基础教学（8）
Taojia9958的博客
06-09 843
一、 sync的使用 vue2的响应式原理原理：通过数据劫持 defineProperty + 发布订阅者模式，当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者，这里在编译模板时就会初始化每一属性的 watcher，在数据发生更新后调用 set 时会通知发布者 notify 通知对应的订阅者做出数据更新，同时将新的数据根性到视图上显示。 缺陷：只能够监听初始化实例中的 d
Vue.js原理分析之observer模块详解
12-12
介绍 observer是Vue核心中最重要的一个模块（个人认为），能够实现视图与数据的响应式更新，底层全凭observer的支持。 注意：本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/core/observer，模块共分为这几个部分： Observer: 数据的观察者，让数据对象的读写操作都处于自己的监管之下 Watcher: 数据的订阅者，数据的变化会通知到Watcher，然后由Watcher进行相应的操作，例如更新视图 Dep: Observer与Watcher的纽带，当数据变化时，会被Observer观察到，然后由Dep通知到Wa
简单实现Vue的observer和watcher
08-31
主要教大家如何简单实现Vue的observer和watcher，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue原理解析之observer模块
weixin_34211761的博客
02-16 905
本文是针对Vue@2.1.8进行分析 observer是Vue核心中最重要的一个模块（个人认为），能够实现视图与数据的响应式更新，底层全凭observer的支持。 observer模块在Vue项目中的代码位置是src/core/observer，模块共分为这几个部分： Observer: 数据的观察者，让数据对象的读写操作都处于自己的监...
前端 - vue3 - - intersectionObserver
最新发布
yky1071442177的博客
05-30 195
intersectionObserver用于异步观察dom元素与在页面中的显示状态，可配置其参数决定 dom元素显示的交叉状态而触发回调函数 基础用法：new IntersectionObserver(callBack,options)
vue原理之observer
weixin_43097944的博客
04-25 3973
上节课我们讲了vue五种类型中的vue 实现data响应 这节课我们讲第二中类型observer Observer 功能 负责把 data 选项中的属性转换成响应式数据 data 中的某个属性也是对象，把该属性转换成响应式数据 数据变化发送通知 具体代码实现如下 class Observer { constructor(data) { this.walk(data) } // 1. 判断数据是否是对象，如果不是对象返回
Vue当中的观察者模式（observer）
banzhangshenlin的博客
07-07 3430
观察者模式： 当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，自动重新更新获取这个变量的新值。 示例代码： <script> //观察者(observer)模式: 当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，让他们自动重新获得这个变量的新值。 var data={ money:1000, setMoney(money){ this.money=money; //只要money被修改，就要调用notifyAll() this.noti
Vue 源码分析之 Observer实现过程
11-29
本文将深入探讨Vue源码中的Observer类，它是实现数据响应化的关键部分。 Observer类的主要职责是将普通的JavaScript对象转化为响应式的对象。当我们在Vue实例中定义data对象时，Vue会通过Observer类将这些数据转化...
vue2中vue.observer的使用
09-10
Vue2中的`Vue.observer`是Vue.js的一个全局API，它用于在Vue实例创建之前手动地添加响应式属性。这个API在Vue2中已经被废弃，取而代之的是使用`Vue.observable`（在Vue3中是`reactive`）方法。不过，如果你仍想了解...
Vue 中的数据拦截（Observer），构建依赖(Dep)，添加订阅(Watcher)，实现响应式
weixin_53315593的博客
08-15 1057
Vue响应式原理
vue源码阅读之Observer
风烟
06-18 792
我们上次学习了vue数据驱动的概念，以及简单的vue怎么知道数据更新，然后采取行动的。今天我们就来继续深入学习，vue怎么把数据和视图给绑定在一起的，数据发生变化，视图怎么会自动发生变化的。
vue源码中的observer运作
weixin_55808645的博客
05-05 488
observer
Vue——Observer的用处
Sunshine0508的博客
02-26 1085
在state.js的initData()函数中，使用的是observe()方法来为数据对象绑定一个Observer对象，Observer对象执行defineReactive()方法为数据对象设置 setter 和 getter。 而在initProps()函数中，通过遍历props选项直接对数据执行了defineReactive()方法来设置 setter 和 gett...
VUE响应式原理-Observer类
wangjiakang12306的博客
10-18 404
class Observer{ // 接受传入的对象，将这个对象转换为getter/setter constructor(data) { this.data = data // 遍历数据 this.walk(data) } // 封装用于数据遍历的方法 walk(data) { // 将遍历后的数据都转换成getter/setter Object.keys(data).forEach(key => { this.conver.
Vue2 中 Observer 一些探究
weixin_38992765的博客
12-04 1750
Observer 简单讲解 源码目录 src\core\observer\index.js export class Observer { value: any; dep: Dep; vmCount: number; constructor (value: any) { this.value = value // 创建了一个dep实例 // 负责对象变更通知：新增属性或者删除属性，数组7个操作 this.dep = new Dep() this.
【Vue】---{__ob__: Observer}
weixin_30748995的博客
03-25 535
Vue中带有__ob__:Observer的数组,无法稳定的取到里边的值? 求解！！！ 补充： 　　参考https://blog.csdn.net/qq_37285177/article/details/78935831 转载于:https://www.cnblogs.com/zjt-blogs/p/10592920.html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值