vue3源码（二）reactive&effect

已于 2024-06-22 19:08:33 修改
阅读量769 收藏 8
点赞数 9
分类专栏： vue3.4源码 文章标签： vue.js javascript 前端
于 2024-01-24 17:05:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwjxyp/article/details/135816455
版权
本文详细介绍了Vue3中的reactive和effect功能，包括如何创建响应式对象，依赖收集机制，以及如何实现effect函数进行副作用管理。内容涵盖了响应式数据的创建、重复处理、依赖跟踪、effect的执行、清除和失活，以及调度执行策略。
摘要由CSDN通过智能技术生成

一.reactive与effect功能

reactive方法会将对象变成proxy对象， effect中使用reactive对象时会进行依赖收集，稍后属性变化时会重新执行effect函数。

<div id="app"></div>
    <script type="module">
      import {
     	reactive,
        effect,
       } from "/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js";
    //   reactive创建一个响应式对象
    //   effect 副作用函数，默认执行一次，数据变化后再次执行
      const state = reactive({ name: "orange", age: 18 });
       effect(() => {
        document.getElementById("app").innerHTML = state.name;
      });
      console.log(state);
      setTimeout(() => {
        state.name = "apple";
      }, 2000);
    </script>

二.reactive与effect实现

1.实现reactive

1.1 get、set基础实现

// reactive.ts
import { isObject } from "@vue/shared";

const mutableHandlers = {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver);
  },
};

export function reactive(target) {
  if (!isObject(target)) {
    return target;
  }
  const proxy = new Proxy(target, mutableHandlers);
  return proxy;
}

如下图，如果采用target[key]方法，获取aliasName时 不会触发name的get
在这里插入图片描述

1.2 完善重复

const state = { name: "orange", age: 18 };
      const p1 = reactive(state);
      const p2 = reactive(state);
      const p3 = reactive(p1);
      console.log(p1 === p2);
      console.log(p1 === p3);
  • 响应式数据缓存，防止重复代理
    使用map，key为对象，值为响应式对象，实现p1 === p2
// 2.1用于记录缓存代理 解决针对同一对象创建两次不相同问题
const reactiveMap = new WeakMap(); //内存泄漏
export function reactive(target) {
  if (!isObject(target)) {
    return target;
  }
  // 2.3如果在map中发现了相同的对象，则直接返回
  const exitProxy = reactiveMap.get(target);
  if (exitProxy) {
    return exitProxy;
  }
  const proxy = new Proxy(target, mutableHandlers);
  // 2.2创建过一次后，就放到map里面，属性名用对象实体
  reactiveMap.set(target, proxy);
  return proxy;
}
  • 响应式数据标记
    用枚举做标记，响应式对象都有get和set方法，p1初次创建时state没有get和set方法，target[ReactiveFlags.IS_REACTIVE]取值为false，创建p3时，p1响应式，取值为true,直接返回p1
// 3.1 给对象增加标识，是否为代理对象
export const enum ReactiveFlags {
  IS_REACTIVE = "__v_isReactive",
}

get(target, key, receiver) {
 //  4.2 如果访问的是ReactiveFlags.IS_REACTIVE 就返回true，代表这个对象是被代理过的
    if (ReactiveFlags.IS_REACTIVE == key) {
      return true;
    }
    return Reflect.get(target, key, receiver);
  },

export function reactive(target) {
  ...,
  // 3.2 如果传递过来的对象已经是一个被代理过的对象，进行处理 直接返回这个对象
 //  4.1首先访问这个属性，如果是被代理过的对象，就会触发劫持的get方法
  if (target[ReactiveFlags.IS_REACTIVE]) {
    return target;
  }
  const proxy = new Proxy(target, mutableHandlers);
  reactiveMap.set(target, proxy);
  return proxy;
}

2.实现effect

2.1 effect函数

vue2与vue3早期的依赖收集采用的都是栈方式存储，vue3后来改为树型数据存储。
effect执行时，把当前effect作为全局的，触发属性的get方法，收集依赖

let activeEffect;
class ReactiveEffect {
  _trackId = 0; //用于记录当前effect执行了几次
  public deps: Array<any> = []; // 判断依赖属性
  public _depsLength = 0;
  public active: boolean = true; // 是否是响应式的
  public parent = undefined;
  constructor(public fn, private scheduler) {}
  run() {
    if (!this.active) {
      return this.fn();
    }
    try {
      this.parent = activeEffect;
      activeEffect = this;
      preCleanEffect(this); // 清理只是更新长度。没有实质性的删除内容
      return this.fn();
    } finally {
    	postCleanEffect(this); // 对比后删除多余的内容
      activeEffect = this.parent;
      this.parent = undefined;
    }
  }
}
export function effect(fn) {
  const _effect = new ReactiveEffect(fn);
  _effect.run();
}

2.2 依赖收集

执行effect时，会触发依赖属性的get方法，在属性的get中进行依赖收集

get(target, key, receiver) {
    if (ReactiveFlags.IS_REACTIVE == key) {
      return true;
    }
    console.log(activeEffect, key);
    track(target,key)
    return Reflect.get(target, key, receiver);
  },

/* 属性变动后 要重新执行run 需要把属性和effect关联起来 收集对象上属性关联的effect
 不能光记录属性，容易两个对象有重名的属性，所以需要带着对象记录
 target为对象
 let mapping = {
    target:{
        name:[effect1,effect2,effect3] 一个属性可以在多个页面使用
    }
 }
 */
const targetMap = new WeakMap();

export function createDep(cleanup, key) {
  let dep = new Map() as any;
  dep.cleanup = cleanup;
  dep.name = key;
  return dep;
}

export function track(target, key) {
  // 如果取值操作没有发生在effect中，则不需要收集依赖
  if (!activeEffect) {
    return;
  }
  // 判断是否已经记录过
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let dep = depsMap.get(key);
  if (!dep) {
    // 值为一个不重复数组
    depsMap.set(key, (dep = createDep(() => depsMap.delete(key), key)));
  }
  trackEffect(activeEffect, dep);
}

// 双向记忆
export function trackEffect(effect, dep) {
  // 重新收集依赖 将不需要的移除
  // _trackId：用于记录执行次数，防止一个属性在当前effect中多次收集
  // 进行比较，flag name ==》flag age    把name删掉
  if (dep.get(effect) !== effect._trackId) {
    dep.set(effect, effect._trackId);

    let oldDep = effect.deps[effect._depsLength];
    if (oldDep !== dep) {
      if (oldDep) {
        cleanDepEffect(oldDep, effect);
      }
      effect.deps[effect._depsLength++] = dep;
    } else {
      effect._depsLength++;
    }
  }

2.3 属性更改 触发effect

 set(target, key, value, receiver) {
    // 数据变化后触发对应的effect方法
    const oldValue = target[key];
    let r = Reflect.set(target, key, value, receiver);
    if (oldValue != value) {
      trigger(target, key, value, oldValue);
    }
    return r;
  },

export function trigger(target, key, newValue, oldValue) {
  // 通过对象找到对应的属性 让这个属性对应的effect重新执行
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }
  const dep = depsMap.get(key); // name 或者 age对应的所有effect
  if (dep) {
    triggerEffects(dep);
  }
}

export function triggerEffects(dep) {
  for (const effect of dep.keys()) {
    if (!effect.scheduler) {
      effect.run();
    } else {
      effect.scheduler();
    }
  }
}

2.4 清除effect依赖

const state = reactive({ flag: true, name: "orange", age: 18 });
      effect(() => {
        // 副作用函数 (effect执行渲染了页面)
        console.log("render");
        document.body.innerHTML = state.flag ? state.name : state.age;
      });
      setTimeout(() => {
        state.flag = false;
        setTimeout(() => {
          console.log("修改name，原则上不更新");
          state.name = "zf";
        }, 1000);
      }, 1000);

在这里插入图片描述
在这里插入图片描述
在每次收集依赖前先清除，但是此处的清除为初始化_depsLength长度，但是没有真正清除deps中的内容,用于在收集过程中进行比较，实现复用，复用收集结束后，_depsLength为本次真正所依赖的属性长度，如果deps的长度更长，则删除后续的属性依赖。

function preCleanEffect(effect) {
  effect._depsLength = 0;
  effect._trackId++; // 同一个effect执行  id相同
}
function postCleanEffect(effect) {
  if (effect.deps.length > effect._depsLength) {
    for (let i = effect._depsLength; i < effect.deps.length; i++) {
      cleanDepEffect(effect.deps[i], effect); // 删除映射表中对应的effect
    }
    effect.deps.length = effect._depsLength; // 更新列表的长度
  }
}
function cleanDepEffect(dep, effect) {
  dep.delete(effect);
  if (dep.size == 0) {
    dep.cleanup(); // 如果map为空则删除这个属性
  }
}

2.5 effect失活

通过effect返回当前effect实例，然后curEffect.effect.stop()调用stop方法

let runner = effect(() => {
        // 副作用函数 (effect执行渲染了页面)
        console.log("render");
        document.body.innerHTML = state.flag ? state.name : state.age;
      });
      runner.effect.stop()

  stop() {
    cleanupEffect(this);
    this.active = false;
  }

export function effect(fn) {
  const _effect = new ReactiveEffect(fn);
  _effect.run();
  const runner = _effect.run.bind(_effect); //调用effect.effect.stop() 停止effect
  runner.effect = _effect;
  return runner;
}

失活后我们可以手动调用 runner()触发effect方法

2.6 调度执行

trigger触发时，我们可以自己决定副作用函数执行的时机、次数、及执行方式

export function effect(fn, options:any = {}) {
    const _effect = new ReactiveEffect(fn,options.scheduler); // 创建响应式effect
    // if(options){
    //     Object.assign(_effect,options); // 扩展属性
    // }
    _effect.run(); // 让响应式effect默认执行
    const runner = _effect.run.bind(_effect);
    runner.effect = _effect;
    return runner; // 返回runner
}


 let runner = effect(() => {
        app.innerHTML = state.flag ? state.name : state.age;
      },{
        scheduler:()=>{
          console.log('不执行更新');  // 实现了AOP切片编程
          runner()  
        }
      });

2.7 深度代理

只有当数据被获取的时候才进行代理，如果获取到的数据还是对象，继续代理

get(target, key, receiver) {
    if (ReactiveFlags.IS_REACTIVE == key) {
      return true;
    }
    track(target, key);
    let r = Reflect.get(target, key, receiver);
    if (isObject(r)) {
      return reactive(r);
    }
    return r;
  },

2.8 防止重复代理

判断当前是否正在执行effect，如果effect中会再次修改属性，触发effect，则不做改变


export class ReactiveEffect {
  ...
  public _running = 0; // 是否正在执行
  constructor(public fn, private scheduler) {}
  run() {
    ...
    try {
     ...
      this._running++;
      return this.fn();
    } finally {
      this._running--;
     ...
    }
  }
}


export function triggerEffects(dep) {
  for (const effect of dep.keys()) {
    if (!effect._running) {
      if (!effect.scheduler) {
        effect.run();
      } else {
        effect.scheduler();
      }
    }
  }
}
橙蚊镜0819
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3响应式原理-effect
白开水的博客
04-05 2371
为了实现响应式，我们使用了new Proxy effect默认数据变化要能更新，我们先将正在执行的effect作为全局变量，渲染（取值），然后在get方法中进行依赖收集 依赖收集的数据格式weakMap（对象：map（属性：set（effect）） 用户数据发生变化，会通过对象属性来查找对应的effect集合，全部执行； 调度器的实现，创建effect时，把scheduler存在实例上，调用runner时，判断如果有调度器就调用调度器，否则执行runner 边界情况： 如果在执行effect时，又修改.
Ref Effect baseHandler reactive Proxy Vue 3
01-04
总的来说，Vue 3 的响应式系统通过 `ref`, `reactive`, `effect` 和 `Proxy` 提供了更为简洁、高效且强大的响应式编程体验。开发者现在可以更自然地编写代码，而无需过多关注底层的响应式实现细节。同时，Vue 3 的这...
【vue3学习笔记】01.响应式模块（reactive,effect,ReactiveEffect）
qq_42531108的博客
10-30 586
vue3原理学习笔记
Vue3源码阅读笔记【reactive和effect的理解和实现】
伟深么的博客
03-28 586
reactive和effect是Vue3中实现响应式数据和副作用函数的核心API，学习并理解这部分内容对于深入Vue核心逻辑是很有帮助。
vue3的effect理解
最新发布
zzzll30的博客
06-13 887
vue3 响应式 effect
手撸vue3核心源码——响应式原理(reactive以及effect)
qq_63204040的博客
07-18 610
vue3使用这么久以来,知识点也是不太扎实,鉴于此与几位志同道合的朋友,一起手撸一遍vue3的核心源码，从0到1实现属于自己的vue3
Vue3 之 响应式 API reactive、 effect源码，详细注释
Echoyya、的博客
06-07 951
Vue3之响应式 API reactive、 effect源码，详细注释 目录一.实现响应式 API:reactive、shallowReactive、readonly、shallowReadonly1. 针对不同的 API 创建不同的响应式对象2. 实现 createReactiveObject3. 实现不同的拦截函数 baseHandlers.ts二.实现响应式 effect1. 创建响应式...
vue3的ReativeEffect原理
我的博客简介
06-20 558
执行`setupRenderEffect`
Vue3 源码实战课程下载（附源码）
11-07
课程中会深入讲解如何创建和管理响应式数据，以及如何利用Vue3的ref和reactive API来实现这一目标。 此外，Vue3 对模板语法进行了优化，支持更多JS表达式和更复杂的条件与循环结构。课程会介绍如何编写高效的模板，...
vue3源码解析 vue3源码解析 vue3源码解析 vue3源码解析
07-02
Vue3 是一款流行的前端框架，其源码解析对于开发者深入理解框架的工作原理至关重要。本文将主要探讨Vue3的几个核心知识点：虚拟DOM（Virtual DOM）、diff算法、mustache模板引擎、数据响应式原理以及指令和生命周期...
Vue3 Project 项目(01) 源码
04-02
Vue3 Project(01)源码分析 Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和功能增强。在这个项目中，我们将会深入探讨 Vue3 的核心概念和特性，通过分析项目的源码来理解其工作原理。本文将主要关注 `config`...
基于vue3实现飞机大战游戏源码.zip
03-03
基于vue3实现飞机大战游戏源码.zip Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and fixes files yarn lint
【Vue3源码】第一章 effect和reactive
m0_68324632的博客
02-12 1295
今天就正式开始Vue3源码学习了，那么很多初学者（包括我）在看vue源码时都会非常迷茫不知从何下手，所以我们在学习源码时应该反其道而行之，剔除掉源码中包括Tree-Shaking、TypeScript类型约束、特性开关、错误处理等操作，只了解其核心原理，大大提高学习效率减少学习成本！
Vue3源码阅读(八)effect
一一
08-12 774
effect effect 作为 reactive 的核心，主要负责收集依赖,更新依赖,其会在 mountComponent、doWatch、reactive、computed 时被调用。 实质:其实就是一个改良版的发布订阅模式。get 时通过 track 收集依赖，而 set 时通过 trigger 触发了依赖，而 effect 收集了这些依赖并进行追踪，在响应后去触发相应的依赖。effect 也正是 Vue3 响应式的核心。 参数 fn 回调函数 options 参数 执行 在调用 effec
Vue3中数据更新函数effect的实现
wenyeqv的博客
06-15 1656
VUe3中effect函数的实现
vue3源码effect
py_boy的博客
08-18 991
Effect 前言：effect类似于vue2源码中的watch，观察者/订阅者。 以下过程中，effect为观察者，target的属性值为被观察者，effect观察target的属性值，target的属性值被修改通知effect，确保以这个思想看待下面源码。 Effect与Target映射 target ===> effect // 存放effect集合，使用Set去重 type Dep = Set<ReactiveEffect> // any为监控对象的属性，属性对应的Dep // 存
Vue3的reactivity模块的响应式原理详解
YunWisdom
07-12 2615
总结起来，Vue 3 的reactivity目录下的代码实现了一个强大的响应式系统，基于 ES6 的Proxy对象和依赖追踪的原理。它通过代理对象拦截对属性的访问和修改，并建立依赖关系来实现自动更新视图的功能。同时，它还支持计算属性和引用类型的处理，使开发者能够更便捷地构建响应式的应用程序。
【Vue3源码学习】响应式源码解析：reactive、effect、ref
ColdCoder的博客
03-01 2159
源码版本 Vue3.2.24 废话不多说，直接开始！！！ reactive响应式 源码地址：packages/reactivity/reactive.ts 先看一下在 Vue3 中定义的几个用来标记目标对象 target 的类型的ReactiveFlags，下面先是枚举的属性 export const enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive', IS_READONLY = '__v_isReado
vue3 effect
kang_k的博客
04-30 1812
从测试用例来学习vue3 effect 此次分享主要是 effect 这个 API 的一些功能、option 以及实现原理。 核心内容是 effect 如何做到跟踪 reactive 内的变化的 测试用例 因为 effect.spec.ts 文件中的测试用例 700 多行，所以后面省略了一些，此次不细说，大家自行查看研究。 以下内容来自vue-next/packages/reactivit...
vue中reactive,effect
05-09
在 Vue 中，`reactive` 和 `effect` 是 `Vue 3` 中新增的两个函数。它们是 `Vue 3` 中实现响应式数据和副作用的核心 API。 `reactive` 函数会将一个普通的 JavaScript 对象转换为响应式对象。当响应式对象中的属性发生变化时，会自动触发更新视图的操作。 `effect` 函数用于创建一个副作用函数，副作用函数可以访问响应式对象，并响应式对象的变化。当响应式对象发生变化时，副作用函数会被重新执行。 举个例子，假设我们有一个 `user` 对象： ```javascript const user = { name: 'Alice', age: 18 } ``` 我们可以使用 `reactive` 函数将这个对象转换为响应式对象： ```javascript import { reactive } from 'vue' const state = reactive(user) ``` 这样，`state` 对象就是响应式对象，当我们修改 `state` 中的属性时，会自动触发更新视图的操作。 ```javascript state.age = 20 ``` 在 `effect` 函数中，我们可以访问 `state` 响应式对象，并在其中做一些副作用操作，比如打印日志： ```javascript import { effect } from 'vue' effect(() => { console.log(state.age) }) ``` 这样，在 `state.age` 发生变化时，副作用函数会被重新执行，从而打印出新的 `age` 值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值