当前位置: 首页 > news >正文

Vue响应式原理五:响应式-自动收集依赖

当前存在的问题:一个对象中的所有属性使用同一个Depend对象, 导致无法区分不同属性的依赖关系(是否发生变化)。例如: 例如当obj.name或obj.age变化时,都会通知所有依赖函数

一. 数据结构缺陷

    1. 对于包含name和age属性的obj对象,使用的是同一个Depend对象会同时收集两个属性的reactiveFns,会造成无法区分是那个属性更新了。
    1. 数据结构图如下:
    • 在这里插入图片描述

二. 将数据结构修改多级层次,可以实现自动收集依赖

    1. 实际开发中会不同的对象,另外会有不同的属性需要管理,可以使用一种数据结构来管理不同对象的不同依赖关系;
    1. 通过WeakMap来管理响应式的数据依赖:
      在这里插入图片描述
    1. 数据结构文字描述:objWeakMap对象 -> obj对象 -> map对象 -> key -> dep对象
    • 3.1. WeakMap层:以响应式对象为key(如obj/user),值为第二层Map
    • 3.2. Map层:以对象属性名为key(如name/age),值为对应Dep对象
    • 3.3. Dep层存储该属性对应的所有reactiveFns
    1. 对象依赖管理的实现:
    • 4.1. dep对象管理的数据结构如下:
       // 封装一个函数:负责通过obj的key获取对应的Depend对象const objMap = new WeakMap() // WeakMap弱引用function getDepend (obj, key) {// 1.根据对象obj,找到对应的map对象// obj对象 -> map对象 -> dep对象// objMap对象 -> obj对象 -> map对象 -> key -> dep对象  let map = objMap.get(obj)if(!map) {map = new Map()objMap.set(obj, map)}// 2.根据key,找到对应的depend对象let dep = map.get(key)if(!dep) {dep = new Depend();map.set(key, dep)}return dep}
    
    • 4.2. 通过代理对象进行数据监听
       // 监听属性变化数据劫持// 方案一:Object.defineProperty  -> Vue2Object.keys(obj).forEach(key => {let value = obj[key];Object.defineProperty(obj, key, {set: function(newValue) {value = newValue;// 更新属性值时触发// 调用dep.notify()通知所有依赖函数const dep = getDepend(obj, key)dep.notify()},get: function() {// 拿到obj -> key// console.log('get函数中:', obj, key);// 找到对应的obj对象的key对应的dep对象// 自动收集依赖const dep = getDepend(obj, key)dep.addDepend(reactiveFn)// obj.name -> dep对象 reactiveFns // obj.age -> dep对象 reactiveFnsreturn value;}})})
    
  • 5.自动收集原理:

    • 设置全局reactiveFn自由变量存储当前函数
    • 执行响应式函数如果访问属性触发getter收集依赖
    • 执行完成后清空reactiveFn
    • 示例代码如下:
      	let reactiveFn = null // 自由变量function watchFn (fn) {reactiveFn = fnfn()reactiveFn = null }
      
    1. 完整代码:
    /*** 1. dep对象数据结构的管理* 每一个对象的每一个属性都会对应一个dep对象* 同一个对象的多个属性的dep对象是存放一个map对象中* 多个对象的map对象,会被存放到一个objMap的对象中* 2. 依赖收集:当执行get函数时,自动的添加fn函数*/ // 实际开发中,响应式对象肯定是不止一个对象的,使用类单独来管理一个对象所有的依赖
    class Depend {constructor() {this.reactiveFns = [];}depend () {if(reactiveFn) {this.reactiveFns.add(reactiveFn)}}addDepend (fn) {if(fn) {this.reactiveFns.push(fn);}}notify () {this.reactiveFns.forEach(fn => {fn()})}
    }const obj = {name: 'why',age: 18
    }// 封装一个函数:负责通过obj的key获取对应的Depend对象
    const objMap = new WeakMap() // WeakMap弱引用
    function getDepend (obj, key) {// 1.根据对象obj,找到对应的map对象// obj对象 -> map对象 -> dep对象// objWeakMap对象 -> obj对象 -> map对象 -> key -> dep对象  let map = objMap.get(obj)if(!map) {map = new Map()objMap.set(obj, map)}// 2.根据key,找到对应的depend对象let dep = map.get(key)if(!dep) {dep = new Depend();map.set(key, dep)}return dep
    }// 监听属性变化数据劫持
    // 方案一:Object.defineProperty  -> Vue2
    Object.keys(obj).forEach(key => {let value = obj[key];Object.defineProperty(obj, key, {set: function(newValue) {value = newValue;// 更新属性值时触发// 调用dep.notify()通知所有依赖函数const dep = getDepend(obj, key)dep.notify()},get: function() {// 拿到obj -> key// console.log('get函数中:', obj, key);// 找到对应的obj对象的key对应的dep对象// 自动收集依赖关系const dep = getDepend(obj, key)// 两种写法:一种需要响应式函数参数,一种直接写到类方法里面// dep.addDepend(reactiveFn)dep.depend()// obj.name -> dep对象 reactiveFns // obj.age -> dep对象 reactiveFnsreturn value;}})
    })// 方案二:new Proxy()  -> Vue3(暂时不写)// 设置一个专门执行响应式函数的一个函数
    let reactiveFn = null // 自由变量
    function watchFn (fn) {reactiveFn = fnfn()reactiveFn = null 
    }// 自动收集依赖:只要把foo函数传入watchFn()中,不管是否发生变化都添加到dep中的reactiveFns去,会存在一个问题
    // 当name发生变化时只需要通知foo函数, age发生变化时也通知foo和bar函数,修改obj.name时发现foo和bar函数都执行了,这是不对的//             name发生变化时只通知name发生变化的函数,但是obj对象对应的是同一个Depend对象,会造成对应name属性和age属性的依赖都放到一个Depend对象中,造成无法区分那个属性依赖发生变化
    // obj对象   
    //             age发生变化时只通知age发生变化的函数// 响应式函数
    watchFn(function foo () {console.log('foo function');console.log('foo: ', obj.name);console.log('foo: ', obj.age);})watchFn(function bar () {console.log('bar: ', obj.age + 10);console.log('bar function');
    })// 修改obj的属性
    console.log('age发生变化时----------------------------------------');
    // obj.name = 'kobe'
    obj.age = 18
    1. 完整数据结构图如下
  • 在这里插入图片描述

http://www.dtcms.com/a/273034.html

相关文章:

  • OKHttp 核心知识点详解
  • 页面html,当鼠标点击图标,移开图标,颜色方块消失
  • 【牛客刷题】跳台阶(三种解法深度分析)
  • doker以及网站案例
  • 快速上手ASP .NET Core 8与MongoDB整合
  • 200W 以内的伺服电机 典型应用场景
  • C语言顺序表:从零开始,解锁数据结构之门!
  • YOLO系列pt导出不同onnx方法
  • Renren框架DistributeLock排他锁实现详解
  • 企业内网系统:从传统开发到智能赋能的进化之路
  • 安达发|医疗器械行业APS自动排单:智能化生产管理的未来之路
  • useRef跨渲染周期存储
  • 数据结构 --- 队列
  • 10.Docker安装mysql
  • chatgpt是怎么诞生的,详解GPT1到GPT4的演化之路及相关背景知识
  • dexie 前端数据库封装
  • 使用快捷键迅速校准多个通道 | IPEmotion
  • 软件技术:柯里化
  • 《PyQt6-3D应用开发技术文档》
  • 仿豆包智能输入框实现
  • python基础25_某大网校(下)处理json数据以及保存题库
  • 安全访问云端内部应用:用frp的stcp功能解决SSH转发的痛点
  • Linux驱动开发(platform 设备驱动)
  • 老题新解|矩阵转置
  • AI驱动的业务系统智能化转型:从非结构化到结构化的智能转换
  • 【STM32 学习笔记】FLASH闪存
  • pytorch学习-12循环神经网络(基础篇)
  • 机器视觉之激光码检测系统
  • 【世纪龙科技】学测-汽车信息化综合实训考核平台(机电方向)
  • 数字孪生系统如何助力汽车零部件企业实现虚拟智控