reactive和effect,依赖收集触发依赖

news2024/11/26 21:42:09

通过上一篇文章已经初始化项目，集成了ts和jest。本篇实现Vue3中响应式模块里的reactive方法。

前置知识要求

如果你熟练掌握Map, Set, Proxy, Reflect，可直接跳过这部分。

Map

Map是一种用于存储键值对的集合，并且能够记住键的原始插入顺序。 其中键和值可以是任意类型的数据。

初始化，添加，获取

let myMap = new Map()

myMap.set('name', 'wendZzoo')
myMap.set('age', 18)

myMap.get('name')
myMap.get('age')

Map 中的一个键只能出现一次，它在 Map 的集合中是独一无二的，重复设置的会被覆盖

myMap.set('name', 'jack')

Map 的键和值可以是任意类型的数据

myMap.set({name: 'wendZzoo'}, [{age: 18}])

删除

let myMap = new Map()
myMap.set('name', 'Tom')
myMap.delete('name')

key数据类型是对象时，需要使用对应的引用来删除键值对

let myMap = new Map()
let key = [{name: 'Tom'}]
myMap.set(key, 'Hello')
myMap.delete(key)

// 如果使用不同的引用来尝试删除键值对
// 它将无法正常工作
// 因为Map无法识别这两个引用是相同的键
myMap.set([{name: 'Tom'}], 'Hello')
myMap.delete([{name: 'Tom'}])

Set

Set是一种集合数据结构，它允许存储唯一的值，无重复项。Set对象可以存储任何类型的值，包括基本类型和对象引用。

let mySet = new Set()

mySet.add('wendZzoo')
mySet.add(18)
mySet.add({province: 'jiangsu', city: 'suzhou'})

可迭代

for (let key of mySet) {
    console.log(key)
}

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Vue 响应式的前提就是需要数据劫持，在 JS 中有两种劫持 property 访问的方式：getter / setters 和 Proxies。Vue 2 使用 getter / setters 完全是出于支持旧版本浏览器的限制，而在 Vue 3 中则使用了 Proxy 来创建响应式对象。

创建 Proxy 对象时，需要提供两个参数：目标对象 target（被代理的对象）和一个处理程序对象 handler（用于定义拦截行为的方法）。

其中 handler 常用的有 get，set 方法。

handler.get() 方法用于拦截对象的读取属性操作，完整使用可以参考：MDN

它接收三个参数：

  1. target：目标对象
  2. property：被获取的属性名
  3. receiver：Proxy 或者继承 Proxy 的对象
const obj = {name: 'wendZzoo', age: 18}
let myProxy = new Proxy(obj, {
    get: (target, property, receiver) => {
        console.log('收集依赖')
        return target[property]
    }
})

// 执行 myProxy.name
// 执行 myProxy.age

handler.set() 方法是设置属性值操作的捕获器，完整使用参考：MDN

它接收四个参数

  1. target：目标对象
  2. property：将被设置的属性名或 Symbol、
  3. value：新属性值
  4. receiver：最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）
const obj = {name: 'wendZzoo', age: 18}
let myProxy = new Proxy(obj, {
    get: (target, property, receiver) => {
        console.log('收集依赖')
        return target[property]
    },
    set: (target, property, value, receiver) => {
        console.log('触发依赖')
        target[property] = value
        return true
    }
})
myProxy.name = 'Jack'
myProxy.age = 20

Proxy 提供了一种机制，通过拦截和修改目标对象的操作来实现自定义行为，在 get 和 set 方法打印日志的地方，也就是 Vue3 实现依赖收集和触发依赖的地方。

Reflect

Reflect 是一个内置的对象，它提供拦截 JS 操作的方法。这让它可以完美的和 Proxy 配合，Proxy 提供了对对象拦截的时机位置，Reflect 提供拦截方法。

Reflect 不是一个构造函数，因此不能 new 进行调用，更像 Math 对象，作为一个函数来调用，它所有的属性和方法都是静态的。

常用的方法有 get，set。

Reflect.get方法允许你从一个对象中取属性值，完整使用参考：MDN

它接收三个参数：

  1. target：需要取值的目标对象
  2. propertyKey：需要获取的值的键值
  3. receiver：如果 target 对象中指定了getter，receiver 则为 getter 调用时的this值
let obj = {name: 'wendZzoo', age: 18}
Reflect.get(obj, 'name')
Reflect.get(obj, 'age')

Reflect.set 方法允许在对象上设置属性，完整使用参考：MDN

它接收三个参数：

  1. target：设置属性的目标对象
  2. propertyKey：设置的属性的名称
  3. value：设置的值
  4. receiver：如果遇到 setter，receiver则为setter调用时的this值
let obj = {}
Reflect.set(obj, 'name', 'wendZzoo')

let arr = ['name', 'address']
Reflect.set(arr, 1, 'age')
Reflect.set(arr, 'length', 1)

更改目录

src下新建文件夹reactivity，新建effect.ts和reactive.ts。

tests文件夹下删除上一篇文章中用于验证jest安装的index.spec.ts，新建effect.spec.ts和reactive.spec.ts。

reactive

先写单测，明确需要的成果，再根据这个需求来实现函数。Vue3的reactive方法返回一个对象的响应式代理，那代理的对象和源对象是不同的，但是又能和源对象一样的嵌套结构。

那单测可以这样写：reactive.spec.ts

import { reactive } from "../reactivity/reactive";

describe("reactive", () => {
  it("happy path", () => {
    let original = { foo: 1 };
    let data = reactive(original);

    expect(data).not.toBe(original);
    expect(data.foo).toBe(1);
  });
});

根据这两个断言，来实现现阶段的reactive方法。Vue3中是使用Proxy实现。

reactive.ts

export function reactive(raw) {
  return new Proxy(raw, {
    get: (target, key) => {
      let res = Reflect.get(target, key);
      // TODO 依赖收集
      return res;
    },
    set: (target, key, value) => {
      let res = Reflect.set(target, key, value);
      // TODO 触发依赖
      return res;
    },
  });
}

运行reactive单测，来验证该方法实现是否正确，执行yarn test reactive

effect

在官网上是没有单独提到这个 API 的，可以在进阶主题的深入响应式系统一篇中找到它的身影。

effect直接翻译为作用，意思是使其发生作用，这个使其的其就是我们传入的函数，所以effect的作用就是让我们传入的函数发生作用，也就是执行这个函数。

使用示例

import { reactive, effect } from "vue";

let user = reactive({
  age: 10,
});

let nextAge;

function setAge() {
  effect(() => {
    nextAge = user.age + 1;
  });
  console.log(nextAge);
}

function updateAge() {
  user.age++;
  console.log(nextAge);
}

在没有使用effect作用于nextAge时，直接触发updateAge方法，输出的nextAge就是undefined；

调用setAge，effect中函数执行给nextAge赋值，响应式数据user中age变化，nextAge也在继续执行effect中函数。

单测

那effect的单测可以写成这样：

import { effect } from "../reactivity/effect";
import { reactive } from "../reactivity/reactive";

describe("effect", () => {
  it("happy path", () => {
    let user = reactive({
      age: 10,
    });
    let nextAge;
    effect(() => {
      nextAge = user.age + 1;
    });
    expect(nextAge).toBe(11);
  });
});

effect方法就是接收一个方法，并执行它。

effect.ts

class ReactiveEffect {
  private _fn: any;
  constructor(fn) {
    this._fn = fn;
  }
  run() {
    this._fn();
  }
}

export function effect(fn) {
  let _effect = new ReactiveEffect(fn);
  _effect.run();
}

通过抽离成一个Class类，去执行传入的 fn 参数。

再来执行所有的单测，验证是否成功，执行yarn test

依赖收集

修改effect单测，增加一个断言，来判断当age变化时，nextAge是否也更新了？

import { effect } from "../reactivity/effect";
import { reactive } from "../reactivity/reactive";

describe("effect", () => {
  it("happy path", () => {
    let user = reactive({
      age: 10,
    });
    let nextAge;
    effect(() => {
      nextAge = user.age + 1;
    });
    expect(nextAge).toBe(11);

    // +++updater
    user.age++;
    expect(nextAge).toBe(12);
  });
});

执行单测发现无法通过，是因为Proxy代理时候并没有实现依赖收集和触发依赖，也就是reactive.ts中还有两个 TODO。

但是，首先得清楚什么叫依赖？

引用官方的例子：

let A0 = 1
let A1 = 2
let A2 = A0 + A1

console.log(A2) // 3

A0 = 2
console.log(A2) // 仍然是 3

当我们更改 A0 后，A2 不会自动更新。

那么我们如何在 JavaScript 中做到这一点呢？首先，为了能重新运行计算的代码来更新 A2，我们需要将其包装为一个函数：

let A2

function update() {
  A2 = A0 + A1
}

然后，我们需要定义几个术语：

  • 这个 update() 函数会产生一个副作用，或者就简称为作用 (effect)，因为它会更改程序里的状态。
  • A0 和 A1 被视为这个作用的依赖 (dependency)，因为它们的值被用来执行这个作用。因此这次作用也可以说是一个它依赖的订阅者 (subscriber)。

因此我们可以大胆通俗的讲，依赖就是指的是观察者（通常是视图或副作用函数）对数据的依赖关系。当观察者需要访问特定数据时，它就成为该数据的依赖。

那依赖收集呢？

依赖收集是用于追踪和管理数据依赖关系。常用于实现响应式系统，其中数据的变化会自动触发相关的更新操作。

当数据发生改变时，相关的视图或操作也能够自动更新，以保持数据和界面的同步。依赖收集可以帮助我们建立起数据和视图之间的关联，确保数据的变化能够自动反映在视图上。

从代码层面讲，读取对象的时候也就是get操作时，进行依赖收集，将目标对象target，对象中key，Dep实例做关联映射。

在effect.ts中定义依赖收集的方法track。

class ReactiveEffect {
  private _fn: any;
  constructor(fn) {
    this._fn = fn;
  }
  run() {
    reactiveEffect = this;
    this._fn();
  }
}

let targetMap = new Map();
export function track(target, key) {
  // target -> key -> dep
  let depMap = targetMap.get(target);
  if (!depMap) { // init
    depMap = new Map();
    targetMap.set(target, depMap);
  }
  let dep = depMap.get(key);
  if (!dep) { // init
    dep = new Set();
    depMap.set(key, dep);
  }
  dep.add(reactiveEffect);
}

let reactiveEffect;
export function effect(fn) {
  let _effect = new ReactiveEffect(fn);
  _effect.run();
}

触发依赖

在设置对象属性时，也就是进行set操作时，触发依赖。将每个属性上挂载的dep的Set结构中的所有作用函数执行。

export function trigger(target, key) {
  let depMap = targetMap.get(target);
  let dep = depMap.get(key);
  for (const effect of dep) {
    effect.run();
  }
}

至此，再次执行所有单测，yarn test

总结

  1. 先通过单测入手，明确需要实现的函数方法的功能
  2. 分布实现功能点，即拆分功能点，先初步实现了reactive方法简单版，只要求原数据和代理之后的数据不同，但是数据结构又要一样，像深拷贝一样。
  3. 通过Class类，实现effect方法可以自执行其传入的函数参数
  4. 依赖收集，通过两个Map结构和一个Set结构来映射数据关系，将所有的fn存放到dep中。通过一个全局变量reactiveEffect来获取到effct实例，为后续触发依赖时，直接拿dep中每一项去执行。
  5. 触发依赖，通过映射关系获取到dep，因为dep是Set结构，可迭代，循环每项执行。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据结构与算法【链表：一】Java实现

数据结构与算法【链表：一】Java实现

目录 链表 单向链表 哨兵链表 双向链表 环形链表 链表 链表是数据元素的线性集合，其每个元素都指向下一个元素，元素存储上并不连续。 随机访问性能 根据 index 查找，时间复杂度 O(n) 插入或删除性能 起始位置：O(1)结束位…
阅读更多...
docker命令大全

docker命令大全

1、查看Docker 容器占用的空间 docker ps -s2、查看所有容器 docker ps -a3、启动、关闭、重启一个已存在的容器 docker start <容器ID> docker stop <容器ID> docker restart <容器ID> 4、进入容器&#xff0c;退出终端的时候不会关闭container的ma…
阅读更多...
自学SLAM（8）《第四讲：相机模型与非线性优化》作业

自学SLAM（8）《第四讲：相机模型与非线性优化》作业

前言 小编研究生的研究方向是视觉SLAM&#xff0c;目前在自学&#xff0c;本篇文章为初学高翔老师课的第四次作业。 文章目录 前言1.图像去畸变2.双目视差的使用3.矩阵微分4.高斯牛顿法的曲线拟合实验 1.图像去畸变 现实⽣活中的图像总存在畸变。原则上来说&#xff0c;针孔透…
阅读更多...
IC行业秋招真实情况记录，快来看看吧~

IC行业秋招真实情况记录，快来看看吧~

2023年&#xff0c;IC行业人才竞争尤为激烈。为了更好的获取到面试的经验&#xff0c;不妨先来了解一下IC面试常见的问题&#xff0c;以及面试该准备的相关事项吧~ &#xff08;文末可领全部面试题目&#xff09; 什么是同步逻辑和异步逻辑&#xff1f; 同步逻辑是时钟之间…
阅读更多...
ef core code first pgsql

ef core code first pgsql

在使用efcode来操作pgsql的时候&#xff0c;总有些基础配置流程项目建立完之后后面就很少用&#xff0c;总是忘掉&#xff0c;写个文档记忆一下吧。基于net 6.0。 1.创建一个mvc项目和一个EF类库 2.在类库里面安装依赖dll Microsoft.EntityFrameworkCore.Design 需要添加的…
阅读更多...
ARPG----C++学习记录05 Section12 动画蒙太奇，收拿剑，MetaSound，调整动画

ARPG----C++学习记录05 Section12 动画蒙太奇，收拿剑，MetaSound，调整动画

代码更新 https://github.com/BAOfanTing/ARPG_Game_Code/commit/c629270e49496ba1bcbaf03780d23c1842ca5e7a Animation Montages动画蒙太奇 蒙太奇的工作流程 新建一个鼠标左键的按键映射&#xff0c;下载一些攻击动画&#xff0c;重定向给我们的人物&#xff0c;新建一个动画…
阅读更多...
一文看懂香港优才计划和高才通计划的区别和优势？如何选？

一文看懂香港优才计划和高才通计划的区别和优势？如何选？

一文看懂香港优才计划和高才通计划的区别和优势&#xff1f;如何选&#xff1f; 为什么很多人都渴望有个香港身份&#xff1f; 英文这里和内地文化相近&#xff0c;语言相通&#xff0c;同时税率较低、没有外汇管制&#xff0c;有稳定金融体制和良好的营商环境&#xff0c;诸多…
阅读更多...
中睿天下Coremail | 2023年Q3企业邮箱安全态势观察报告

中睿天下Coremail | 2023年Q3企业邮箱安全态势观察报告

10月25日&#xff0c;北京中睿天下信息技术有限公司联合Coremail邮件安全发布《2023年第三季度企业邮箱安全性研究报告》。2023年第三季度企业邮箱安全呈现出何种态势&#xff1f;作为邮箱管理员&#xff0c;我们又该如何做好防护&#xff1f; 以下为精华版阅读&#xff0c;如需…
阅读更多...
【业务场景】长列表的处理

【业务场景】长列表的处理

长列表的处理 1. 什么是长列表 在前端开发中&#xff0c;经常会遇到列表展示&#xff0c;如果列表项的数量比较多&#xff0c;我们一般选择采用分页的方式来进行处理 但传统的前后翻页方式只适用于后台的管理系统中&#xff0c;而在用户端、尤其是在移动端&#xff0c;为了保…
阅读更多...
Spark读取excel文件

Spark读取excel文件

文章目录 一、excel数据源转成csv二、Spark读取csv文件（一）启动spark-shell（二）读取csv生成df（三）查看df内容一、excel数据源转成csv 集群bigdata - ubuntu: 192.168.191.19master(bigdata1) - centos: 192.168.23.78 slave1(bigdata2) - centos: 192.168.23.79 slave2(b…
阅读更多...
WY-35A4三相欠压继电器 导轨安装，延时动作0-99.99s可调

WY-35A4三相欠压继电器 导轨安装，延时动作0-99.99s可调

系列型号 单相 JY-45A1电压继电器&#xff1b;JY-45B1电压继电器&#xff1b; JY-45C1电压继电器&#xff1b;JY-45D1电压继电器&#xff1b; JY-41A1电压继电器&#xff1b;JY-41B1电压继电器&#xff1b; JY-41C1电压继电器&#xff1b;JY-41D1电压继电器&#xff1b; …
阅读更多...
vue2项目从0搭建(一):项目搭建

vue2项目从0搭建(一):项目搭建

前言: vue2项目可谓十分常见,国内大部分的前端码农应该都是用vue2技术在开发,虽然vue3和react等技术也有很多,但是占据绝大多数的中高级搬砖码农应该干的都是vue2技术的项目,就算现在很多人转战vue3技术了,但是维护原有vue2的项目应该也是很多的。 我本来是不打算写vue2的技术…
阅读更多...
Karmada调度器

Karmada调度器

调度器就像一个发动机&#xff0c;如果没有了发动机输入动力&#xff0c;是无法正常运行的。就像 Kubernetes 的调度器&#xff0c;它会负责根据节点的资源状态、Pod 的运行状态&#xff0c;判断 Pod 是调度到怎样的集群节点上去。对于 Karmada 这样的多云能力的调度器来说&…
阅读更多...
mysql之MHA

mysql之MHA

1、定义 全称是masterhigh avaliabulity。基于主库的高可用环境下可以实现主从复制及故障切换&#xff08;基于主从复制才能故障切换&#xff09; MHA最少要求一主两从&#xff0c;半同步复制模式 2、作用 解决mysql的单点故障问题。一旦主库崩溃&#xff0c;MHA可以在0-30…
阅读更多...
OSCNet: Orientation-Shared Convolutional Network for CT Metal Artifact Learning

OSCNet: Orientation-Shared Convolutional Network for CT Metal Artifact Learning

OSCNet: 面向共享的CT金属伪影学习卷积网络 论文链接&#xff1a;https://ieeexplore.ieee.org/document/10237226 项目链接&#xff1a;https://github.com/hongwang01/OSCNet&#xff08;目前不会开源&#xff09; Abstract X射线计算机断层扫描(CT)已广泛应用于疾病诊断和…
阅读更多...
“糖尿病日”感言

“糖尿病日”感言

长期旺盛的写作欲&#xff0c;今天忽地就莫名其妙地衰退下来了。感到浑身都不舒服&#xff0c;特别是过去从未出现过的腰微痛、乏力现象发生了。 转念一想&#xff0c;或是老龄人一日不如一日的正常反应吧&#xff1f;而且&#xff0c;今天恰逢“ 联合国糖尿病日”&#xff0c…
阅读更多...
2023-2024-2 高级语言程序设计-二维数组

2023-2024-2 高级语言程序设计-二维数组

7-1 矩阵运算 给定一个nn的方阵&#xff0c;本题要求计算该矩阵除副对角线、最后一列和最后一行以外的所有元素之和。副对角线为从矩阵的右上角至左下角的连线。 输入格式: 输入第一行给出正整数n&#xff08;1<n≤10&#xff09;&#xff1b;随后n行&#xff0c;每行给出…
阅读更多...
WGCLOUD的特点整理

WGCLOUD的特点整理

做运维工作很多年了&#xff0c;项目中用过不少的运维软件工具&#xff0c;今天整理下WGCLOUD的特点&#xff08;优点&#xff09; 首先WGCLOUD是完全免费的 部署使用&#xff1a;部署简单方便&#xff0c;上手容易&#xff0c;几乎没有学习成本&#xff0c;对新手友好 文档…
阅读更多...
文献阅读——Layered Costmaps for Context-Sensitive Navigation

文献阅读——Layered Costmaps for Context-Sensitive Navigation

摘要 许多导航系统&#xff0c;包括无处不在的ROS导航堆栈&#xff0c;在单个成本图上执行路径规划&#xff0c;其中大部分信息存储在单个网格中。这种方法在生成最小长度的无碰撞路径方面非常成功&#xff0c;但是当成本图中的值超出已占用或空闲空间时&#xff0c;它在动态的…
阅读更多...
【教学类-07-08】20231114《破译电话号码-图形篇（图形固定列不重复）》（大4班 有名字 有班级 无学号、零=0）

【教学类-07-08】20231114《破译电话号码-图形篇（图形固定列不重复）》（大4班 有名字 有班级 无学号、零=0）

效果展示 背景需求&#xff1a; 最近大4班做“嵌套骰子”非常频繁&#xff0c;为了避免“疲劳”&#xff0c;我找出他们班家长的手机号&#xff0c;批量做了“破译电话号码”&#xff0c;有图案版和加减法版&#xff0c;考虑到第一次做&#xff0c;还是选最简单的“点数总数&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023