【手写 Vue2.x 源码】第二十三篇 - 依赖收集 - 视图更新部分
创始人
2024-05-11 20:53:05
0

一,前言

上篇,主要介绍了依赖收集过程中 dep 和 watcher 关联:

利用 js 单线程特性,在 Watcher 类中 get 方法即将触发视图更新前,
利用全局的类静态属性 Dep.target 记录 Watcher 实例
并且,在视图渲染的取值过程中,在Object.defineProperty的get方法中,让数据的dep记住渲染watcher
从而,实现了 dep 与 watcher 相关联,只有参与视图渲染的数据发生变化才会触发视图的更新

本篇,继续依赖收集的视图更新部分


二,实现视图更新逻辑

1.查重 watcher

问题:同一数据在视图中多次使用会怎样?

按照当前逻辑,同一数据在一个视图中被多次使用时,相同 watcher 会在 dep 中多次保存

  • {{name}}
  • {{name}}
  • {{name}}
  • 这时 name 的 dep 中,会保存三个相同的渲染 watcher

    所以,watcher 需要进行查重

    同 Dep 类的做法:给 Watcher 添加一个 id,
    每次 new Watcher 是 id 自增,以此作为标记对 watcher 实例进行查重
    
    let id = 0;
    class Watcher {constructor(vm, fn, cb, options){this.vm = vm;this.fn = fn;this.cb = cb;this.options = options;this.id = id++;   // watcher 唯一标记this.getter = fn;this.get();}get(){Dep.target = this;this.getter();Dep.target = null;}
    }
    export default Watcher
    

    2. 让 watcher 也记住 dep

    前面,让数据的dep记住了渲染 watcher
    同样的,watcher 也有必要记住 dep

    let id = 0;class Dep {constructor(){this.id = id++;this.subs = [];}// 让 watcher 记住 dep(查重),再让 dep 记住 watcherdepend(){// 相当于 watcher.addDep:使当前 watcher 记住 depDep.target.addDep(this);  }// 让 dep 记住 watcher - 在 watcher 中被调用addSub(watcher){this.subs.push(watcher);}
    }Dep.target = null;  // 静态属性,用于记录当前 watcherexport default Dep;
    

    为什么要这样实现?

    如果要互相记住,watcher 中要对 dep 做查重;dep 中也要对 watcher 做查重;
    用这种方法使 dep 和 watcher 关联在一起后,只要判断一次就可以了
    
    import Dep from "./dep";
    let id = 0;
    class Watcher {constructor(vm, fn, cb, options){this.vm = vm;this.fn = fn;this.cb = cb;this.options = options;this.id = id++;this.depsId = new Set();  // 用于当前 watcher 保存 dep 实例的唯一idthis.deps = []; // 用于当前 watcher 保存 dep 实例this.getter = fn;this.get();}addDep(dep){let did = dep.id;// dep 查重 if(!this.depsId.has(did)){// 让 watcher 记住 depthis.depsId.add(did);this.deps.push(dep);// 让 dep 也记住 watcherdep.addSub(this); }}get(){Dep.target = this;this.getter();Dep.target = null;}
    }export default Watcher;
    

    这种实现方式,会让 dep 和 watcher 保持一种相对的关系:

    如果 watcher 中存过 dep;那么 dep 中一定存过 watcher ;
    如果 watcher 中没存过 dep;那么 dep 中一定没存过 watcher ;
    所以只需要判断一次,就能完成 dep 和 watcher 的查重;
    

    3. 数据改变,触发视图更新

    当视图更新时,会进入 Object.defineProperty 的 set 方法
    需要在 set 方法中,通知 dep 中所有收集的 watcher,执行视图更新方法
    
    // src/observe/index.js#defineReactivefunction defineReactive(obj, key, value) {observe(value);let dep = new Dep();  // 为每个属性添加一个 depObject.defineProperty(obj, key, {get() {if(Dep.target){dep.depend();}return value;},set(newValue) {if (newValue === value) returnobserve(newValue);value = newValue;dep.notify(); // 通知当前 dep 中收集的所有 watcher 依次执行视图更新}})
    }
    

    4. Dep 中添加 notify 方法:

    let id = 0;class Dep {constructor(){this.id = id++;this.subs = [];}depend(){Dep.target.addDep(this);  }addSub(watcher){this.subs.push(watcher);}// dep 中收集的全部 watcher 依次执行更新方法 updatenotify(){this.subs.forEach(watcher => watcher.update())}
    }
    Dep.target = null;
    export default Dep;
    

    5. Watcher 中添加 update 方法:

    import Dep from "./dep";
    let id = 0;
    class Watcher {constructor(vm, fn, cb, options){this.vm = vm;this.fn = fn;this.cb = cb;this.options = options;this.id = id++;this.depsId = new Set();this.deps = [];this.getter = fn;this.get();}addDep(dep){let did = dep.id;if(!this.depsId.has(did)){this.depsId.add(did);this.deps.push(dep);dep.addSub(this); }}get(){Dep.target = this;this.getter();Dep.target = null;}// 执行视图渲染逻辑update(){this.get();}
    }
    export default Watcher;
    

    6. 问题

    多次频繁更新同一个数据,会使视图频繁进行重新渲染操作

    let vm = new Vue({el: '#app',data() {return { name: "Brave" , age: 123}}
    }); 
    vm.name = "Brave Wang";
    vm.name = "Brave";
    vm.name = "Brave Wang";
    vm.name = "Brave";
    vm.name = "Brave Wang";
    vm.name = "Brave";
    
    name的值变化了 6 次,但最终其实没有变化还是 Brave,
    这里就需要改为做异步更新的机制
    

    三,结尾

    本篇,介绍了 Vue依赖收集的视图更新部分,主要涉及以下几点:

    视图初始化时:

    • render方法中会进行取值操作,进入 Object.defineProperty 的 get 方法
    • get 方法中为数据添加 dep,并记录当前的渲染 watcher
    • 记录方式:watcher查重并记住 dep,dep 再记住 watcher

    数据更新时:

    • 当数据发生改,会进入 Object.defineProperty 的 set 方法
    • 在 set 方法中,使 dep 中收集的全部 watcher 执行视图渲染操作 watcher.get()
    • 在视图渲染前(this.getter方法执行前),通过 dep.target 记录当前的渲染 watcher
    • 重复视图初始化流程

    下一篇:Vue 异步更新


    维护日志:

    20210802:修改文章摘要

    相关内容

    热门资讯

    省委宣传部举办“党旗下的誓言”... 本报讯 (记者 林清智) 7月1日,省委宣传部举办“党旗下的誓言”主题党日暨学习教育专题党课活动,省...
    “你的生产,我来服务” 近日,在位于莆田涵江的百威雪津啤酒有限公司的包装运输生产线现场,叉车穿梭、包装流水线轰鸣,工人精准有...
    21社论丨打通全链条,支持创新... 7月1日,国家医保局、国家卫生健康委发布《支持创新药高质量发展的若干措施》(下称《措施》),在5个方...
    农村新项目加盟代理,招商网 农... 腰椎康复理疗全国招聘加盟商!腰椎康复理疗全国招聘加盟商!加盟热线:18065836069腰妇康是恩施...
    马鬃山之旅 □ 刘西昆 当晨光在甘肃大地上流淌,马鬃山正以黑色玄武岩的鬃毛拂动高原的风。远远望去,荒漠中山峦起...
    做啥子小本生意,最小本钱的生意... 在国家政策的支持下,很多人因为对老板或现状不满意而辞职回家创业。这些创业者往往选择热门行业。然而,这...
    智算中心“狂飙”背后部分算力闲... 2023年初,以ChatGPT为代表的大模型应用的出现驱动智算需求迅速攀升,国内地方政府、电信运营商...
    日媒:从袜子长度到打喷嚏次数,... 《今日日本》6月27日文章,原题:小学生和初中生讲述日本最奇怪的校规   日本的学校制度长期以来一直...
    fgo萌新一枚,有大佬能告诉我... fgo萌新一枚,有大佬能告诉我怎么搭配阵容吗?萌新一枚,礼装爆炸,不嫌弃可以加一下
    永远的“小青妹儿”   何小青同志先进事迹报告会现场,台下掌声久久不息。 四川日报全媒体记者 华小峰 摄□四川日报全媒体...