理清Vue响应式系统中的Watcher

最新推荐文章于 2024-10-01 23:29:04 发布
最新推荐文章于 2024-10-01 23:29:04 发布
阅读量1.6k 收藏 6
点赞数 2
分类专栏： Vue 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ancecis/article/details/104035186
版权
本文详细探讨Vue响应式系统中的Watcher，包括其作为观察者模式载体的角色，Watcher的三种类型（普通、lazy、render），Watcher与Dep的关系，以及观察者执行队列的工作原理。通过理解这些，能帮助开发者更好地掌握Vue的响应式机制。
摘要由CSDN通过智能技术生成

理清Vue响应式系统中的Watcher

一、什么是响应系统中的Watcher，它的作用是什么？

响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。

在这里插入图片描述

每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），watcher和业务逻辑只有1对1关系。

二、Watcher的类型

在Vue源码中是没有体现出Watcher的类型的，我在这里给Watcher添加类型是为了更好地理解Watcher这个对象。Watcher在普通的业务逻辑上可以分为以下三类：

  • 普通的Watcher：与数据1对1关系。
  • <
最低0.47元/天 解锁文章
Weybn
关注
专栏目录
八小时实现迷你版vuejs五：实现Watcher
言川的博客
11-09 1754
再贴一下之前的一张图： 我们已经实现了 Observer 和 Directive，并且自己实现了一个 v-on 的指令，那么再实现 Dep 和 Watcher 就完整了。这里的 dep.js 其实就是一个记录依赖关系的，他有一个内部的数组 subs 会把所有依赖的 watcher 记录在里面，然后 observer 在观察到数据改变的时候，就告诉dep，它会负责遍历 subs 并调用他们的 upd
vue响应式系统之observe、watcher、dep的源码解析
10-17
总的来说，Vue的响应式系统通过Observer实现数据的监听，通过Dep实现依赖管理和通知机制，而Watcher则作为数据变化和视图更新之间的桥梁。这种设计允许Vue在数据变化时自动追踪依赖关系，并高效地更新对应的视图，...
vue中的watcher
olderandyanger的博客
12-22 670
Vue 中的 watcher 是一种特殊的对象，它可以订阅响应式数据的变化，并在变化时执行相应的回调函数。Vue 中有三种类型的 watcher。
Vue中的watch
最新发布
youxinm24的博客
10-01 3738
可以说存在三种第一种是维持数据响应式的；第二种是，是函数在自身内部维护的一个，配合其内部的属性开关来决定的值是需要重新计算还是直接复用之前的值；第三种就是了，就是用户自定义的导出对象的属性当然实际上他们都是通过类来实现的Vue 的响应式系统通过观察者模式（Observer Pattern）实现，当数据发生变化时，依赖于这些数据的地方（如模板渲染或计算属性）会被通知并更新。 ：当 Vue 初始化数据时，每个响应式对象都会被挂载一个 属性（Observer 实例），这个属性指向对象的 实例。 会遍历对象的属
聊聊 vue 中的 watcher
weixin_34390996的博客
12-04 905
大家对于 watch 应该不陌生，项目中都用过下面这种写法： watch: { someProp () { // do something } } // 或者 watch: { someProp: { deep: true, handler () { // do something } } } 复制代码上面的写法告诉 vue，我需要监听...
vue Watcher分类 computed watch
weixin_33721427的博客
11-22 202
1、Watcher构造函数源码部分代码 if (options) { this.deep = !!options.deep this.user = !!options.user this.lazy = !!options.lazy this.sync = !!options.sync this.before = o...
sport应用
08-27 333
Vue数据双向绑定 Vue是通过数据劫持的方式来实现数据双向数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，该方法允许精确地添加或修改对象的属性，对数据添加属性描述符中的getter与setter实现劫持。 描述 运行一个Vue实例并将data打印，可以看到对象中对于msg有了get与set，通过他们就可以实现数据的劫持，从而进行数据的更新，在Vue中get与set是通过ES5的Object.defineProperty()方法定义的，该方法的具体
Vue响应式原理Observer、Dep、Watcher理解
10-16
在Vue.js框架中，响应式原理是其核心特性之一，允许Vue检测数据变化并自动更新视图。响应式原理主要涉及三个概念：Observer、Dep、Watcher。本篇将详细介绍这三个概念，并通过示例代码和图示来加深理解。 ### ...
Vue源码之用户watcher
天地会珠海分舵
10-28 1164
之前两篇文章分析了渲染watcher和计算属性watcher，今天我们开始分析最后一个 -- 用户watcher
VUE源码解读之响应式系统及Watcher的调度实现
LuckyWinty的博客
03-30 530
背景鉴于目前 vue3 还没有正式发布，而且 vue2 里面的一些实现思想还是很有参考价值的，于是这篇原理性讲解还是 vue2 的，希望对你有启发～响应...
Vue2源码学习笔记 - 13.响应式原理—Watcher 类详解
小问's blog
07-29 1326
渲染函数，计算属性和侦听属性等都有需要监视变量变动的需求，Watcher正是在这种情况下应运而生，Watcher作为观察者，配合Dep一起组成响应式的核心部件。这个类代码量比较多，我们也花了很多笔墨来研究学习，我觉得这是值得的。接下来我们会把前面学的这些类串起来，学习整个响应式的核心流程与逻辑。...
Vue 模拟源码实现响应式原理——实现watcher.js（第5部分）
小卡酷谋的博客
08-08 264
实现Vue响应式原理 之 watcher.js部分 响应式流程图 Watcher功能 1.当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图 2.自身实例化的时候往 dep 对象中添加自己 Watcher结构 代码实现 class Watcher { constructor(vm, key, cb) { this.vm = vm // data 中的属性名称 this.key = key // 回调函数负责更
vue中三种watcher
qq_42931285的博客
04-06 1285
vue中三种watcher
vue源码:Watcher系列（一）
yezi__6的博客
04-07 2130
vue源码:Watcher系列（一） 在分析之前我们先来看看，vue中都有哪些Watcher种类呢？以及分别在什么时候创建呢？从vue源码里面看，Watcher是一个公共类，在不同的地方去初始化Watcher就代表不同类的Watcher。主要分为以下三类： computed watcher：执行计算属性更新computed user watcher：用户注册的普通watcher render watcher：负责视图更新 注意者三种watcher的执行顺序为computed watcher、user w
Vue-数据响应式原理
s8806479的博客
04-25 1918
什么是数据响应式？ 数据变化，页面重新渲染。×不准确 数据是在对象里面，就是改变了对象的一个属性，运行了render函数。√稍微准确 改变了对象，运行了某些函数。√准确 响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。 以上两张图证明了对象改变，运行了某些函数。 在具体实现上，vue用到了几个核心部件: 0bserver Dep Watcher Scheduler 0bserver 我们先来思考，对象改变，怎么联动地运行某些函数？ ES5数据劫持
vue源码中的watcher理解
weixin_55808645的博客
05-05 870
watcher
理解VUE响应式原理
buler_sky的博客
11-23 2628
1、响应式原理基础 响应式原理基础是基于Object.defineProperty(obj, prop, descriptor),descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）。 扩展：上面是vue2.0的基础原理，vue3.0的基础原理是： 2、核心对象：Dep与Watcher Dep: vue在data里申明的每一个属性都会生成一个Dep的实例对象，De...
Vue-Watcher观察者源码详解
comedyking的博客
06-08 1966
源码调试地址 https://github.com/KingComedy/vue-debugger 什么是Watcher Watcher是Vue中的观察者类，主要任务是：观察Vue组件中的属性，当属性更新时作相应的操作，即实例化时传入的回调函数 在Vue的对属性做响应式处理时，会收集每个属性的依赖，即每个属性所依赖的watcher，当属性更新时，通知watcher执行更新dom操作。 Watcher有三种类型的，一个是计算属性computed创建的computedWatcher，一个是侦听器wat
深入理解Vue：响应式系统源码分析——observe、watcher与dep
"Vue响应式系统的关键在于observe、watcher和dep这三个核心概念。通过发布订阅模式，Vue能够实现数据变化驱动视图更新的效果。Observer类负责数据对象的深度监听，使用`Object.defineProperty`对每个属性进行数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值