Vue源码分析之数据绑定Dep与Watcher的关系

最新推荐文章于 2024-01-09 14:17:46 发布
最新推荐文章于 2024-01-09 14:17:46 发布
阅读量1.9k 收藏 10
点赞数 4
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16049879/article/details/104681114
版权
本文探讨Vue框架中的数据绑定机制，重点分析Dep和Watcher的关系。数据绑定依赖于数据劫持技术，通过`defineProperty()`监听data中属性的变化。Dep在初始化时为每个属性创建，而Watcher在解析模板表达式时创建。两者间存在多对多关系，一个Dep可以关联多个Watcher，反之亦然。当属性值改变时，Dep通知其对应的Watcher进行界面更新。
摘要由CSDN通过智能技术生成

数据绑定

  • 数据绑定
  1. 一旦更新了data中的某个属性数据，所有界面上直接（this.xxx='aaa'）或间接（计算属性或方法）使用了此属性的节点都会更新
  • 数据劫持
  1. 数据劫持是vue中用来实现数据绑定的一种技术
  2. 基本思想：通过defineProperty()来监视data中所有属性（任意层次）数据的变化，一旦变更就去更新界面

Dep与Watcher的关系

  1. Dep何时创建？—— 初始化时给data的属性进行数据劫持时创建的
  2. 有几个？—— 与data中的属性一一对应
  3. 结构是什么？—— id：标识，subs：[]相关的n个watcher容器

 

  1. Watcher何时创建？—— 初始化时解析大括号表达式/一般指令时创建
  2. 有几个？—— 与模板表达式（不包含事件指令）一一对应
  3. 结构是什么？
this.cb = cb  // 用于更新界面的回调
this.vm = vm  // vm
this.exp = exp  // 对应的表达式
this.depIds = {}  // 相关的n个dep容器对象
this.value = this.get()  // 当前表达式对应的value
  • 当执行vm.name='ab
最低0.47元/天 解锁文章
慕斯策划一场流浪
关注
专栏目录
说说Vue响应式系统中的Watcher和Dep的关系-面试进阶
bb_xiaxia1998的博客
10-05 389
响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），要不是没有联系。watcher。
Vue Watch和Dep的关系 ？
最新发布
csdn_Levy的博客
09-24 338
来观察和响应 Vue 实例上的数据变动。方法，通知它们数据已经更新，这个过程叫做“派发更新”。当这个数据发生变化时，Vue 会调用这个数据的。当一个数据被访问时，Vue 会调用这个数据的。是一个可以收集依赖的类，它内部维护了一个。就是观察者，它会“观察”它所依赖的数据。中使用依赖数据时，Vue 会为每一个。在 Vue.js 中，我们经常使用。数组，用来存放所有依赖这个数据的。数组中，这个过程叫做“依赖收集”。来监听数据变化的，当数据变化时，会通知所有依赖这个数据的。，让它们执行对应的操作。
【手写 Vue2.x 源码】第二十二篇 - dep 和 watcher 关联
BraveWangDev
01-14 1093
本篇， dep 和 watcher 关联；1，介绍了依赖收集的必要性；2，介绍了 Watcher 和 Dep 的作用；3，实现了 Watcher 类和 Dep 类；4，Watcher 和 Dep 如何产生关联；
当我精通vue2的源码dep和watcher的关系时
写完这行代码打球去的博客
11-03 448
当我精通vue2的dep和watcher关系时
理清Vue响应式系统中的Watcher和Dep的关系
油墨香^-^的博客
02-27 341
响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），要不是没有联系。watcher。
通过源码分析Vue的双向数据绑定详解
08-29
Vue的双向数据绑定是其核心特性之一，它使得视图与数据模型之间的交互变得极其简单。在Vue中，双向数据绑定是通过观察者模式（Observer）和依赖收集（Dependency）机制来实现的。以下是详细的知识点解析： 1. **...
Vue响应式原理Observer、Dep、Watcher理解
10-16
在Vue.js框架中，响应式原理是其核心特性之一，允许Vue检测数据变化并自动更新视图。响应式原理主要涉及三个概念：Observer、Dep、Watcher。本篇将详细介绍这三个概念，并通过示例代码和图示来加深理解。 ### ...
vue响应式系统之observe、watcher、dep的源码解析
10-17
Vue.js的响应式系统是其核心特性之一，它使得数据模型与视图之间的绑定变得自动化。这个系统基于三个主要组件：Observer、Watcher和Dep。理解这些组件的工作原理有助于深入掌握Vue的内部机制。 首先，Observer类是...
详解Vue源码学习之双向绑定
10-17
在Vue框架中，双向绑定是一项核心特性，它使得数据模型与视图之间的交互变得极其便捷。Vue是如何实现这一功能的呢？我们通过源码学习来深入理解。 首先，当一个Vue实例被创建时，它的`data`选项会被处理。Vue会遍历...
vue 源码分析，实现原理（Watcher, Dep, computed）
左不言的博客
10-26 1076
把这里的代码复制到本地执行，看懂这100行代码，你就一定能看懂 vue const data = { flag: false, firstName: 'Zheng', lastName: 'Yimeng' } const computed = { name() { if (!data.flag) { return '你拿不到' } return data.firstName + ' ' + data.last.
Vue源码解析系列——响应式原理篇：理解Dep类和Watcher类
hd101367816的博客
02-23 1987
写在前面 这一篇我们先不着急阅读源码，因为接下来需要用到一个比较复杂的设计模式：观察者模式，而且还需要理解依赖收集才能继续向下阅读源码，所以这次我们先做一个铺垫。 依赖收集 通过之前阅读的源码我们了解到Vue2.x版本的响应式是依靠Object.defineProperty这个API来进行对象的劫持，当对象进行取值和赋值操作的时候，都可以进行一些另外的操作。在get过程中，也就是对象的取值，Vue做的操作是：依赖收集。 那么什么是依赖？ 这里我们举一个例子: <template> <di
vue学习4--Dep对象与watcher对象
qq_43505774的博客
09-14 531
var Dep = function Dep() { this.id = uid++; this.subs = []; }; Dep.prototype.addSub = function addSub(sub) { this.subs.push(sub); }; Dep.prototype.removeSub = function removeSub(sub) { remove(this.subs, sub); }; Dep.prototyp.
详解vue原理之观察模式Dep-＞Watcher
weixin_43097944的博客
04-25 2579
根据前几节课，相信大家都明白的vue的基本原理 能够实现vue响应及渲染 这如果还不清楚的 请看上几篇文章 这节课 我们讲解vue中数据的响应实现 即vue中的观察模式 如果还不明白观察模式的 也请看我的文章详解js中观察模式和订阅发布模式的区别 Dep(Dependency) 功能 收集依赖，添加观察者(watcher) 通知所有观察者 结构 下面是代码的基本实现 // 要实现数据的响应机制 即数据变化 视图变化 // 在vue的响应机制中 我们要使用观察模式来监听数据的变化
Vue响应式原理-理解Observer、Dep、Watcher
weixin_34021089的博客
06-03 572
开篇 最近在学习Vue的源码，看了网上一些大神的博客，看起来感觉还是蛮吃力的。自己记录一下学习的理解，希望能够达到简单易懂，不看源码也能理解的效果
Vue当中响应式 对Dep和Watcher详细解释（手搓）
weixin_69810763的博客
01-09 1790
之前已经将数据劫持已经全部完成了。那么，接下来，主要的要点就是在于两点，依赖收集和触发依赖更新。。首先，要先明白，依赖是什么，比方说在我们的模板中有{{a}}，那么，这个地方就有对于变量 a 的依赖。在模板编译的时候，就会触发 a 变量的getter。然后，当我们执行a++;的时候，那么，我们就要触发依赖的更新，当初模板中{{a}}的地方，就要更新，是吧！所以，我们都是gettersetter。这一节的内容，主要就是用来专门讲清楚这两件事情。
Vue设计原理2
lulu_luxi的博客
05-10 279
MVVM框架的原理及代码实现MVVM框架数据响应式涉及到的类的介绍KVue ：框架构造函数Observer：执行数据响应（分辨数据是对象还是数组）Complie：模板编译，初始化视图，收集依赖（更新函数，watcher创建）Watcher：执行更新函数Dep：管理多个watcher，批量更新 MVVM框架 数据响应式 首先原理的分析： 1.new Vue（）首先执行初始化，对data执行响应化处理，这个过程发生在Observer中 2.同时对模板进行编译，找到其中动态绑定的数据，从data中获取并初始化视图
vue双向绑定原理
weixin_44739881的博客
02-10 363
observer Dep watcher 将data中的值进行defineProperty监视，遇到对象则递归调用，直到所有都被defineProperty。 是用来装入watcher的队列。由Observer主动触发。 在渲染dom时实例化watcher 在get时，将Dep.target放入dep队列中。在set时，通知dep进行更新。 每一个dep实例装着对应的watch...
vue响应式系统--observe、watcher、dep
hfhan的博客
04-08 4000
Vue的响应式系统 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身，而不用手动处理数据到视图的渲染，避免了繁琐的 DOM 操作，提高了开发效率。 vue 的响应式系统依赖于三个重要的类：Dep 类、Watcher 类、Observer 类，然后使用发布订阅模式的...
Vue双向数据绑定深度解析：Watcher、Observer与Dep机制
观察者（Observer）和依赖检测器（Dep）与Watcher紧密相连，Observer负责检测数据变化，而Dep则负责跟踪这些变化并触发视图更新。 2. 渲染流程分析：从初始化render流程入手，观察Vue如何在组件挂载时创建和管理...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值