Vue当中响应式 对Dep和Watcher详细解释（手搓）

最新推荐文章于 2024-05-31 09:23:03 发布
最新推荐文章于 2024-05-31 09:23:03 发布
阅读量1.6k 收藏 28
点赞数 33
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69810763/article/details/135478552
版权
本文详细解释了JavaScript中Vue.js框架如何通过Dep和Watcher实现依赖收集和触发视图更新的过程，涉及getter和setter中的操作以及Observer和Watcher类的作用。
摘要由CSDN通过智能技术生成

之前已经将数据劫持已经全部完成了。

那么，接下来，主要的要点就是在于两点，依赖收集和触发依赖更新。

它的意义主要在于控制哪些地方使用了这个变量，然后，按照最小的开销来更新视图。

首先，要先明白，依赖是什么，比方说在我们的模板中有 {{a}} ，那么，这个地方就有对于变量 a 的依赖。

在模板编译的时候，就会触发 a 变量的 getter。

然后，当我们执行 a++; 的时候，那么，我们就要触发依赖的更新，当初模板中 {{a}} 的地方，就要更新，是吧！

所以，我们都是在 getter 中收集依赖，在 setter 中触发依赖更新 。

这一节的内容，主要就是用来专门讲清楚这两件事情。

依赖收集和派发更新

依赖收集和触发依赖更新主要由两个类来完成， Dep 和 Watcher 。

Dep 和 Watcher 在设计模式中，就是发布-订阅者的模式。

而依赖，你可以理解为所谓的订阅者。

  • Dep

Dep 说白了就是发布者,它的工作就是依赖管理，要知道哪些地方用到了这个变量，可能用到这个变量的地方有很多，所以，它会有多个订阅者。

然后，每个变量都应该有属于自己的 Dep ，因为每个变量所在的依赖位置是不一样的，所以他们的订阅者也不一样。

然后在变量更新之后，就去通知所有的订阅者（Watcher），我的变量更新了，你们该触发视图更新了。

  • Watcher

Watcher 说白了就是订阅者，它接受 Dep 发过来的更新通知之后，就去执行视图更新了。

它其实就是所谓的 watch 监听器，变量改变之后，执行一个回调函数。

初始化我们的 Dep 类

我们先按照图例来创建我们的 Dep 类

根据我们的需求:

  •         首先，它要在初始化的时候，新建一个 subs 数组，用来存储依赖，也就是 Watcher 的实例
  • class Dep{
  constructor() {
    // 用数组存储自己的订阅者   subs 是 subscribes 订阅者的意思
    // 这个数组里放的是 Watcher 的实例
    this.subs=[]
  }
}
  • 它需要有一个 depend() 方法，用于添加依赖,也就是将 Watcher 实例往 subs 数组中 push
class Dep{
  // 添加依赖
  depend(){
    // 判断当前是否有需要监听的目标,Dep.target 会被 Wacher 赋值
    if(Dep.target){
      // 将监听的目标推进 subs 数组
      this.subs.push(Dep.target);
    }
  }
}
  • 它需要有一个 notify() 方法，用于通知 Wacher 数据更新了，调用 Wacher 的 update() 方法
class Dep{
  // 通知所有订阅者
  notify(){
    // 浅克隆一份
    const subs=this.subs.slice();
    // 遍历
    for(let i=0,l=subs.length;i<l;i++){
      // 逐个更新
      subs[i].update();
    }
  }
}

使用我们的 Dep 类

每个属性都要有自己的 Dep Dep 我们在前面也说了，每个属性都应该有它自己的 Dep ，用来管理依赖。

所以，首先，如果我们在 Observer 中创建 Dep，那不就可以了。毕竟 Observer 会遍历到每一个对象。

class Observer{
  constructor(obj){
    this.dep=new Dep();
    // ...
  }
}
  1. 在 getter 中收集依赖

所以，很明显，我们可以在 defineReactive 的 get 中收集依赖

因为有了 if(Dep.target) 的判断，所以，只有绑定 Watcher 的变量触发 getter 时，才会添加依赖。

function defineReactive(obj,key,val) {
  let dep=new Dep();
  let childOb;
  // 判断当前入参个数，两个的话直接返回当前层的对象
  if(arguments.length===2){
    val=obj[key];
    childOb = observe(val)
  }
  Object.defineProperty(obj,key,{
    get(){
      // Dep.target 是我们弄的唯一标识，当有这个标识的时候，添加依赖
      if(Dep.target){
        // 添加依赖
        dep.depend();
        // 如果有子属性，也要将它加入依赖
        if(childOb){
          // 给子属性添加依赖
          childOb.dep.depend();
        }
      }
      return val;
    },
  })
}

这个 Dep.target 其实就是 Watcher 的实例

在 setter 中触发依赖更新

所以，很明显，我们可以在 defineReactive 的 set 中收调用 notify() 方法告知 Watcher 实例，数据更新了。

function defineReactive(obj,key,val) {
  let dep=new Dep();
  let childOb;
  // 判断当前入参个数，两个的话直接返回当前层的对象
  if(arguments.length===2){
    val=obj[key];
    childOb = observe(val)
  }
  Object.defineProperty(obj,key,{
    // ...
    set(newValue){
      val=newValue;
      childOb = observe(val)
      // notify 切忌 val=newValue 之后，不然在 callback 回调中一直是旧值
      dep.notify();
    }
  })
}

初始化我们的 Watcher 类

首先， Watcher 实例应该大家会相对而言更加好理解点，因为，我们有一个 watch 侦听器，大家一定都很熟悉，这两个其实一样。

我们先按照图例来创建我们的 Watcher 类

根据我们的需求:

首先，它要在初始化的时候，需要传入目标对象 target ， 属性名 expression , 回调函数 callback

class Watcher{
  // target 目标对象
  // expression 属性名
  // callback 回调函数
  // value 属性的值
  constructor(target,expression,callback) {
    this.target=target;
    // parsePath 为一个高阶函数
    this.getter=parsePath(expression);
    this.callback=callback;
    // get为我们之后要写的获取值的方法
    this.value=this.get();
  }
}

。

 parsePath需要我们单独说一下，们要监听到 a.b.c.d ，所以，我们需要下面的这种格式

new Watcher(a,'b.c.d',val=>{
  console.log('ok啦',val);
})

所以，这个 get 很明显就有点难度了。 我们需要通过循环 拿到 a.b 然后 .c 然后 .d。

我们将这个方法命名为 parsePath 。

function parsePath(str){
  let segments = str.split('.');
  return obj=> {
      for(let i=0;i<segments.length;i++){
        if(!obj) return;
        obj=obj[segments[i]];
      }
      return obj;
  }
}

入参接受我们的 b.c.d ，我们可以看到 第一句执行之后 segments=['b','c','d'] ，然后进行第二层，这是返回了一个方法，按照循环，那就是 obj=obj.b => obj=obj.c => obj=obj.d ，所以，就是返回一个对象的 obj.b.c.d，相当于是遍历字符串中的属性树。

它需要有一个 get() 方法，用于获取当前的值，并将它更新，然后 return 返回

class Watcher{
  // 获取当前的值，并将它更新，然后 return 返回
  get(){
    // 进入依赖收集阶段，将 Dep.target 设为 Watcher 实例本身
    Dep.target=this;

    // 当前对象
    const obj=this.target;
    let value;
    // 当对象不再使用的时候，我们需要将它清空
    try{
      value=this.getter(obj)
    }finally {
      Dep.target=null;
    }
    this.value=value
    return value;
  }
}

它需要有一个 update() 方法，用于执行数据触发更新之后，保存新的值和旧的值，将它返回给 callback 回调函数

class Watcher{
  // Dep发过来的通知，当前变量更新了，我们返回一个更新之后的回调函数
  update(){
    // this.value 由于还没触发更新，所以此时是旧的值
    const oldValue=this.value;
    // 通过我们的 getter 方法，直接获取最新的值
    const newValue=this.get();
    // 将新值和旧值返回给 callback 回调函数
    this.callback(newValue,oldValue);
  }
}
observe(a)

首先, observe(a) 会将 a 对象变为响应式对象

new Watcher

执行 new Watcher 之后，就会调用 Watcher 类的 constructor 。此时 target 是 a ， expression 是 'b.c.d'， callback 是 (val,oldValue)=>{console.log('ok',val,oldValue); })

// target 目标对象
// expression 属性名
// callback 回调函数
// value 属性的值
constructor(target,expression,callback) {
  this.target=target;
  // parsePath 为一个高阶函数
  this.getter=parsePath(expression);
  this.callback=callback;
  // get为我们之后要写的获取值的方法
  this.value=this.get();
}

this.value=this.get() 又会执行 get() 方法, 此时 Dep.target 被赋值了，就是当前 Watcher 实例。

get(){
  // 进入依赖收集阶段，将 Dep.target 设为 Watcher 实例本身
  Dep.target=this;

  // 当前对象
  const obj=this.target;
  let value;
  // 当对象不再使用的时候，我们需要将它清空
  try{
    value=this.getter(obj)
  }finally {
    Dep.target=null;
  }
  this.value=value
  return value;
}

将当前 Watcher 实例推进了 subs 数组中。

// 添加依赖
depend(){
  // 判断当前是否有需要监听的目标,Dep.target 会被 Wacher 赋值
  if(Dep.target){
    // 将 Watcher 实例添加进 subs
    this.subs.push(Dep.target)
  }
}

触发 defineReactive 中的 set 方法，然后执行 dep.notify();

set(newValue){
  val=newValue;
  childOb = observe(val)
  // notify 切忌 val=newValue 之后，不然在 callback 回调中一直是旧值
  dep.notify();
}

通过遍历 subs 列表，通知所有订阅者

// 通知所有订阅者
notify(){
  // 浅克隆一份
  const subs=this.subs.slice();
  // 遍历
  for(let i=0,l=subs.length;i<l;i++){
    // 逐个更新
    subs[i].update();
  }
}

相应的订阅者执行 update() ，将新值和旧值获取，然后通过 callback 回调函数返回

// Dep发过来的通知，当前变量更新了，我们返回一个更新之后的回调函数
update(){
  // this.value 由于还没触发更新，所以此时是旧的值
  const oldValue=this.value;
  // 通过我们的 getter 方法，直接获取最新的值
  const newValue=this.get();
  // 将新值和旧值返回给 callback 回调函数
  this.callback(newValue,oldValue);
}

最终 new Watcher 实例中的回调函数成功执行，并且成功拿到 val 和 oldValue

new Watcher(a,'b.c.d',(val,oldValue)=>{
  console.log('ok',val,oldValue);  // ok 10 5
})

最终代码

class Dep{
  constructor() {
    // 用数组存储自己的订阅者   subs 是 subscribes 订阅者的意思
    // 这个数组里放的是 Watcher 的实例
    this.subs=[]
  }
  // 添加依赖
  depend(){
    // 判断当前是否有需要监听的目标,Dep.target 会被 Wacher 赋值
    if(Dep.target){
      // 将 Watcher 实例添加进 subs
      this.subs.push(Dep.target)
    }
  }
  // 通知所有订阅者
  notify(){
    // 浅克隆一份
    const subs=this.subs.slice();
    // 遍历
    for(let i=0,l=subs.length;i<l;i++){
      // 逐个更新
      subs[i].update();
    }
  }
}

class Watcher{
  // target 目标对象
  // expression 属性名
  // callback 回调函数
  // value 属性的值
  constructor(target,expression,callback) {
    this.target=target;
    // parsePath 为一个高阶函数
    this.getter=parsePath(expression);
    this.callback=callback;
    // get为我们之后要写的获取值的方法
    this.value=this.get();
  }
  // Dep发过来的通知，当前变量更新了，我们返回一个更新之后的回调函数
  update(){
    // this.value 由于还没触发更新，所以此时是旧的值
    const oldValue=this.value;
    // 通过我们的 getter 方法，直接获取最新的值
    const newValue=this.get();
    // 将新值和旧值返回给 callback 回调函数
    this.callback(newValue,oldValue);
  }
  // 获取当前的值，并将它更新，然后 return 返回
  get(){
    // 进入依赖收集阶段，将 Dep.target 设为 Watcher 实例本身
    Dep.target=this;

    // 当前对象
    const obj=this.target;
    let value;
    // 当对象不再使用的时候，我们需要将它清空
    try{
      value=this.getter(obj)
    }finally {
      Dep.target=null;
    }
    this.value=value
    return value;
  }
}

function parsePath(str){
  let segments = str.split('.');
  return obj=> {
      for(let i=0;i<segments.length;i++){
        if(!obj) return;
        obj=obj[segments[i]];
      }
      return obj;
  }
}

let a={
  b:{
    c:{
      d:10
    }
  }
}

observe(a)
new Watcher(a,'b.c.d',(val,oldValue)=>{
  console.log('ok',val,oldValue);  // ok 10 5
})
a.b.c.d=55;

来都来了_
关注
  • 33
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
说说Vue响应式系统中的Watcher和Dep的关系-面试进阶
bb_xiaxia1998的博客
10-29 975
响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），要不是没有联系。watcher。
Vue源码分析之数据绑定Dep与Watcher的关系
qq_16049879的博客
03-06 1884
数据绑定 数据绑定 一旦更新了data中的某个属性数据，所有界面上直接（this.xxx='aaa'）或间接（计算属性或方法）使用了此属性的节点都会更新 数据劫持 数据劫持是vue中用来实现数据绑定的一种技术 基本思想：通过defineProperty()来监视data中所有属性（任意层次）数据的变化，一旦变更就去更新界面 ...
Vue2源码学习笔记 - 12.响应式原理—Dep 类详解
小问's blog
07-28 2212
Dep类对于整个响应式功能模块是非常重要的，它与要实现响应式功能的数据对象和对象属性关联，它只在Observer类构造函数和函数中实例化，并在setter\getter方法中的特定场景下执行依赖收集（执行Dep.depend方法）和派发更新通知（执行Dep.notify方法）。Dep类代码量不大但很重要，它与其他类和模块配合完成响应式的功能，后面我们还会继续研究学习它。httpshttpshttpshttpshttpshttps。...
请说明Vue Watch和Dep的关系 ？
最新发布
youhebuke225的博客
05-31 428
Vue中的Watch和Dep（全称：Dependency，在Vue内部实现中通常与Watcher和Dep类相关）之间的关系主要体现在Vue如何响应式地追踪和更新数据上。综上所述，Vue中的Watch和Dep共同构成了Vue的响应式系统，使得当数据发生变化时，能够自动地触发相应的更新和处理函数。
04-Vue的响应式机制浅谈-Watcher
东逝水
03-31 799
core/observer/watcher.js Watcher的注释很能说明它的意图 /** * A watcher parses an expression, collects dependencies, * and fires callback when the expression value changes. * This is used for both the $watch()...
vue中的watcher
olderandyanger的博客
12-22 607
Vue 中的 watcher 是一种特殊的对象，它可以订阅响应式数据的变化，并在变化时执行相应的回调函数。Vue 中有三种类型的 watcher。
vue学习4--Dep对象与watcher对象
qq_43505774的博客
09-14 492
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响应式系统之observe、watcher、dep的源码解析
10-17
这个系统基于三个主要组件：Observer、Watcher和Dep。理解这些组件的工作原理有助于深入掌握Vue的内部机制。 首先，Observer类是响应式系统的基础，它负责对数据对象进行深度遍历，并使用`defineReactive`函数对每...
Vue响应式原理Observer、Dep、Watcher理解
10-16
通过结合`Observer`、`Dep`和`Watcher`，Vue能够实现数据的响应式更新。当数据变化时，`Dep`通知其所有订阅的`Watcher`，`Watcher`则执行更新视图的操作。这样的机制使得Vue开发者能够专注于数据和业务逻辑，而不必...
详细分析vue响应式原理
10-15
然后根据数据类型对数据进行不同的处理，如果是数组则会重写其方法以实现依赖追踪和响应式更新；如果是对象，则会对其每个属性调用defineReactive方法将其变成响应式属性。 2. Dep类：这个类是一个依赖收集器，每个...
详解vue原理之观察模式Dep-＞Watcher
weixin_43097944的博客
04-25 2508
根据前几节课，相信大家都明白的vue的基本原理 能够实现vue响应及渲染 这如果还不清楚的 请看上几篇文章 这节课 我们讲解vue中数据的响应实现 即vue中的观察模式 如果还不明白观察模式的 也请看我的文章详解js中观察模式和订阅发布模式的区别 Dep(Dependency) 功能 收集依赖，添加观察者(watcher) 通知所有观察者 结构 下面是代码的基本实现 // 要实现数据的响应机制 即数据变化 视图变化 // 在vue的响应机制中 我们要使用观察模式来监听数据的变化
VUE 源码解读之响应式系统及 Watcher 的调度实现
油墨香^-^的博客
09-13 148
即在初始化vue实例的时候，对data、props等对象的每一个属性都通过Object.defineProperty定义一次，在数据被set的时候，做一些操作，改变相应的视图。这就需要依赖收集的过程。队列执行过程中，存一个对象circular，里面有每个watcher的执行次数，如果哪个watcher执行超过MAX_UPDATE_COUNT定义的次数就认为是死循环，不再执行，默认是100次。删除Watcher，如果一个组件的Watcher在队列中，而他的父组件被删除了，这个时候也要删掉这个Watcher。
Vue源码之用户watcher
天地会珠海分舵
10-28 1106
之前两篇文章分析了渲染watcher和计算属性watcher，今天我们开始分析最后一个 -- 用户watcher
php watcher,vue 中的 watcher详解
weixin_42402188的博客
04-12 159
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。本文主要介绍了vue 中的 watcher的相关资料,需要的朋友可以参考下，希望能帮助到大家。大家对于 watch 应该不陌生，项目中都用过下面这种写法：watch: {s...
vue中三种watcher
qq_42931285的博客
04-06 1105
vue中三种watcher
vue中的methods，conputed，watcher
weixin_30685029的博客
08-13 1198
todo 1,computed(计算属性)属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据) computed: { fullName: function () { return this.firstName + this.lastName } ...
deep原理 vue的watch_vue watch原理
weixin_42118423的博客
01-17 349
结论1、很多情况下，computed和watch可以实现相同的功能；2、当需要在数据变化时执行异步或开销较大的操作时，使用watch会更好一些。因为computed会立即返回，此时异步操作可能还没有完成；3、因为数据是响应式的，使得watch有意义。并不是因为watch了才使得数据是响应式的。4、使用immediate:true，会在初始化watch时就立即执行handler回调函数，而不用等下一...
【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep
油墨香^-^的博客
02-27 429
之前已经将数据劫持已经全部完成了。那么，接下来，主要的要点就是在于两点，依赖收集和触发依赖更新。它的意义主要在于控制哪些地方使用了这个变量，然后，按照最小的开销来更新视图。首先，要先明白，依赖是什么，比方说在我们的模板中有{{a}}，那么，这个地方就有对于变量 a 的依赖。在模板编译的时候，就会触发 a 变量的getter。然后，当我们执行a++;的时候，那么，我们就要触发依赖的更新，当初模板中{{a}}的地方，就要更新，是吧！所以，我们都是在getter中收集依赖，在setter中触发依赖更新。
Vue响应式中的渲染 watcher
m0_74265396的博客
01-04 359
当组件的响应式数据发生变化时，渲染Watcher会调用组件的render函数，并将新的VNode（虚拟DOM节点）与旧的VNode进行对比，然后更新组件的DOM结构。总结一下，Vue中的响应式系统是通过使用Watcher来实现的，其中渲染Watcher负责观察和处理组件的渲染过程。当组件的响应式数据发生变化时，渲染Watcher会重新执行组件的render函数，并将新的VNode与旧的VNode进行对比来更新DOM结构。在Vue的实现中，渲染Watcher是通过。在Vue的响应式系统中，有三种主要类型的。
详细说说vue的响应式原理
05-13
Vue的响应式原理主要是依赖于Object....总的来说，Vue的响应式原理是通过Object.defineProperty()方法对数据进行劫持，结合Dep和Watcher对象实现的。这种机制可以自动追踪数据的变化，并实现视图的自动更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

来都来了_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值