【Vue】响应式系统和依赖收集跟踪原理

为什么要依赖收集?

先举个栗子🌰

我们现在有这么一个 Vue 对象。

new Vue({template: `<div><span>{{text1}}</span> <span>{{text2}}</span> <div>`,data: {text1: 'text1',text2: 'text2',text3: 'text3'}
});

然后我们做了这么一个操作。

this.text3 = 'modify text3';

我们修改了 datatext3 的数据,但是因为视图中并不需要用到 text3 ,所以我们并不需要触发上一章所讲的 cb 函数来更新视图,调用 cb 显然是不正确的。

再来一个栗子🌰

假设我们现在有一个全局的对象,我们可能会在多个 Vue 对象中用到它进行展示。

let globalObj = {text1: 'text1'
};let o1 = new Vue({template:`<div><span>{{text1}}</span> <div>`,data: globalObj
});let o2 = new Vue({template:`<div><span>{{text1}}</span> <div>`,data: globalObj
});

这个时候,我们执行了如下操作。

globalObj.text1 = 'hello,text1';

我们应该需要通知 o1 以及 o2 两个vm实例进行视图的更新,「依赖收集」会让 text1 这个数据知道“哦~有两个地方依赖我的数据,我变化的时候需要通知它们~”。

最终会形成数据与视图的一种对应关系,如下图。
在这里插入图片描述

接下来我们来介绍一下「依赖收集」是如何实现的。

订阅者 Dep

首先我们来实现一个订阅者 Dep ,它的主要作用是用来存放 Watcher 观察者对象。

class Dep {constructor () {/* 用来存放Watcher对象的数组 */this.subs = [];}/* 在subs中添加一个Watcher对象 */addSub (sub) {this.subs.push(sub);}/* 通知所有Watcher对象更新视图 */notify () {this.subs.forEach((sub) => {sub.update();})}
}

为了便于理解我们只实现了添加的部分代码,主要是两件事情:

  • addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作;
  • notify 方法通知目前 Dep 对象的subs 中的所有 Watcher 对象触发更新操作。

观察者 Watcher

class Watcher {constructor () {/* 在new一个Watcher对象时将该对象赋值给Dep.target,在get中会用到 */Dep.target = this;}/* 更新视图的方法 */update () {console.log("视图更新啦~");}
}
Dep.target = null;

依赖收集

接下来我们修改一下 defineReactive 以及 Vue 的构造函数,来完成依赖收集。

我们在闭包中增加了一个 Dep 类的对象,用来收集 Watcher 对象。在对象被「读」的时候,会触发 reactiveGetter 函数把当前的 Watcher 对象(存放在 Dep.target 中)收集到 Dep 类中去。之后如果当该对象被「写」的时候,则会触发 reactiveSetter 方法,通知 Dep 类调用 notify 来触发所有 Watcher 对象的 update 方法更新对应视图。

function defineReactive (obj, key, val) {/* 一个Dep类对象 */const dep = new Dep();Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {/* 将Dep.target(即当前的Watcher对象存入dep的subs中) */dep.addSub(Dep.target);return val;         },set: function reactiveSetter (newVal) {if (newVal === val) return;/* 在set的时候触发dep的notify来通知所有的Watcher对象更新视图 */dep.notify();}});
}class Vue {constructor(options) {this._data = options.data;observer(this._data);/* 新建一个Watcher观察者对象,这时候Dep.target会指向这个Watcher对象 */new Watcher();/* 在这里模拟render的过程,为了触发test属性的get函数 */console.log('render~', this._data.test);}
}

小结

总结一下。

首先在 observer 的过程中会注册 get 方法,该方法用来进行「依赖收集」。在它的闭包中会有一个 Dep 对象,这个对象用来存放 Watcher 对象的实例。其实「依赖收集」的过程就是把 Watcher 实例存放到对应的 Dep 对象中去。get 方法可以让当前的 Watcher 对象(Dep.target)存放到它的 subs 中(addSub)方法,在数据变化时,set 会调用 Dep 对象的 notify 方法通知它内部所有的 Watcher 对象进行视图更新。

这是 Object.definePropertyset/get 方法处理的事情,那么「依赖收集」的前提条件还有两个:

  1. 触发 get 方法;
  2. 新建一个 Watcher 对象。

这个我们在 Vue 的构造类中处理。新建一个 Watcher 对象只需要 new 出来,这时候 Dep.target 已经指向了这个 new 出来的 Watcher 对象来。而触发 get 方法也很简单,实际上只要把 render function 进行渲染,那么其中的依赖的对象都会被「读取」,这里我们通过打印来模拟这个过程,读取 test 来触发 get 进行「依赖收集」。

本章我们介绍了「依赖收集」的过程,配合之前的响应式原理,已经把整个「响应式系统」介绍完毕了。其主要就是 get 进行「依赖收集」。set 通过观察者来更新视图,配合下图仔细捋一捋,相信一定能搞懂它!
在这里插入图片描述

注:本节代码参考《响应式系统的依赖收集追踪原理》。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/780379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当构造器参数较多时考虑用生成器

重叠构造器模式 ——不能很好地扩展: public class Person {private String name; // 必填private int age; // 必填private String address; // 可选private String email; // 可选private String phone; // 可选private String occupation; // 可选// 无参构造…

使用AOP实现打印日志

首先创建annotation.SystemLog类&#xff1a; package com.gjh.annotation;import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;Target(ElementType.METHOD…

聊聊websocket opcode中的text / binary模式

webscoket 协议中有一个非常有意思的设计&#xff0c;在opcode内&#xff0c;对帧类型进行了区分&#xff1a;文本和二进制流。但这个区分并没有规定文本类型有类似于http协议中空行表示结束的说法&#xff0c;而且长度也是由帧头记录&#xff0c;也就是说&#xff0c;单纯从协…

你如何创建一个JUnit测试类,并编写一个基本的测试方法?在JUnit中,你如何设置和清理测试环境?

你如何创建一个JUnit测试类&#xff0c;并编写一个基本的测试方法&#xff1f; 创建一个JUnit测试类并编写一个基本的测试方法涉及以下几个步骤&#xff1a; 添加JUnit依赖&#xff1a; 首先&#xff0c;确保你的项目中已经包含了JUnit的依赖。如果你使用的是Maven或Gradle等构…

Polar靶场web(三)

期待得到某一件事物的时候&#xff0c;才是最美好的。 签到 发现不能提交&#xff0c;看一下f12 发现提交按钮被禁用了&#xff0c;且最大输入9个字符&#xff0c;我们可以改一下。 现随便提交一个发现要提交ilovejijcxy session文件包含 发现有文件包含&#xff0c;那先包含…

2.java openCV4.x 入门-hello OpenCV

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天 &#x1f9ed;文章导航&#x1f9ed; ⬆️ 1.环境搭建 ⬇️ 3.Mat之构造函数与数据类型 hell…

【MySQL】DML的表操作详解:添加数据&修改数据&删除数据(可cv例题语句)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

[Linux]基础IO(上)--理解文件系统调用、文件描述符、万物皆文件

一、文件的理解 每种语言都有进行文件操作的函数接口&#xff0c;例如C语言的fopen、fwrite、fprintf等等&#xff0c;但是进行文件操作的前提是代码已经跑起来&#xff0c;因为文件的打开与关闭要通过CPU来运行程序代码&#xff0c;所以打开文件的本质是进程打开文件&#xff…

iMazing2024功能强大的iPhone和iPad管理工具

iMazing是一款功能强大的iPhone和iPad管理工具&#xff0c;确实可以作为iTunes的替代品进行数据备份。以下是一些关于iMazing的主要特点和功能&#xff1a; 设备备份&#xff1a;iMazing可以备份iOS设备上的所有数据&#xff0c;包括照片、视频、音乐、应用程序等。与iTunes相比…

使用uni-app开发微信小程序并实现页面间的跳转

一、下载需要的开发工具 HBuilderX 微信开发者工具 HBuilderX HBuilderX-高效极客技巧 (dcloud.io) 微信开发者工具 下载 / 开发版更新日志 (qq.com) 二、新建项目 通过vue-cli命令行创建项目 参考&#xff1a; uni-app官网 (dcloud.net.cn) 2.1全局安装 vue-cli npm i…

C++经典面试题目(十一)

1. final和override关键字 在C中&#xff0c;final 和 override 是两个用于类继承和成员函数重写的关键字&#xff0c;它们主要在面向对象编程的上下文中使用&#xff0c;以增强代码的可读性和安全性。 1. final 关键字 final 关键字主要有两种用法&#xff1a; 用于类&…

最小公约数 最大公倍数 同余原理

1.最小公约数 int gcd(int a,int b) {return b0 ? a : gcd(b,a%b); }int main() {int x,y;cin>>x>>y;cout<<gcd(x,y);return 0; } 每一次调用gcd传进去的两个值&#xff0c;若b为零则输出a&#xff0c;否则再次调用gcd&#xff0c;传入b&#xff0c;a%b 2.最…

Mysql数据备份与恢复实战

文章目录 备份类型备份内容备份工具mysqldump备份 实战案例&#xff1a;恢复误删除的表准备工作2:30完全备份完全备份后更新数据表10:00误删students表需要恢复还原的状态开始还原恢复 为什么要备份&#xff1f; 备份是为了&#xff1a;灾难恢复&#xff1a;硬件故障、软件故障…

磁盘空间打爆以后恢复 journal日志,及用户手册

Systemd日志管理服务&#xff1a;Journald以及重要配置选项 https://www.cnblogs.com/morgan363/p/13957565.html Linux 日志管理介绍 https://blog.csdn.net/m0_49864110/article/details/129175745 linux下的系统日志管理 https://blog.csdn.net/chitung_hsu/article/de…

Leetcode的正确打开方式

很多新手朋友在学习完数据结构与算法之后&#xff0c;都想找个平台磨练自己的技艺。那么LeetCode绝对是不二之选。但是官网刷题不是很友好&#xff0c;那么今天给大家介绍一款刷LeetCode神器。也是未来工作之后的摸鱼神器。 leetcode-editor 本打工人的摸&#xff08;nei&am…

10分钟带你用openlab搭建web网站

准备工作 虚拟机恢复快照 关闭防火墙、下载httpd&#xff0c;启动httpd服务、显示httpd服务是否开启 [rootserver ~]# systemctl stop firewalld [rootserver ~]# yum install httpd -y [rootserver ~]# systemctl start httpd [rootserver ~]# systemctl enable httpd [root…

【Java初阶(六)下】封装 继承 多态

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; 目录 1.前言2.多态2.1多态的概念2.2多态实现条件2.3重写2.3.1避免在构造方法中调用重写的方法 2.4向上转型和向下转型2.4.1向上转型2.4.2向下转型 3.抽象类3…

常见的数学方法

Math类表示数学类&#xff0c;其中的数学方法都被定义成为static形式&#xff0c;所以可以直接通过Math类的类名调用某个数学方法。语法格式&#xff1a; Math.xxx(参数)&#xff1b; 例题 输入n个整数a1,a2,a3,......an,求这n个数的最大值max&#xff0c;最小值min&#xff0…

QProcess详解

QProcess 是 Qt 库中的一个核心类&#xff0c;用于在 Qt 应用程序中启动外部进程&#xff08;如操作系统命令、可执行文件或脚本&#xff09;&#xff0c;并与其进行交互。下面详细介绍 QProcess 的使用方法和主要功能&#xff1a; 基本使用 标题创建 QProcess 对象 QProces…

记录个人学习golang路线(如何学习golang,如何转golang)

最近好久没更&#xff0c;在看兔兔的博客&#xff0c;学习golang&#xff0c;兔兔的文章&#xff0c;有一定的编程经验 && 初学golang者&#xff0c;一定要看&#xff0c;如果是其他语言转golang&#xff0c;那就必须要看了&#xff0c;可以帮助你了解golang的语法&…