V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shmmsond
V2EX  ›  推广

[分享] 浅谈 Vue 中 computed 实现原理

  •  
  •   shmmsond · 2018-09-12 16:35:39 +08:00 · 2744 次点击
    这是一个创建于 2251 天前的主题,其中的信息可能已经有所发展或是发生改变。

    流程总结如下:

    1. 当组件初始化的时候,computeddata 会分别建立各自的响应系统,Observer遍历 data 中每个属性设置 get/set 数据拦截
    2. 初始化 computed 会调用 initComputed 函数
      1. 注册一个 watcher 实例,并在内实例化一个 Dep 消息订阅器用作后续收集依赖(比如渲染函数的 watcher 或者其他观察该计算属性变化的 watcher
      2. 调用计算属性时会触发其Object.definePropertyget访问器函数
      3. 调用 watcher.depend() 方法向自身的消息订阅器 depsubs 中添加其他属性的 watcher
      4. 调用 watcherevaluate 方法(进而调用 watcherget 方法)让自身成为其他 watcher 的消息订阅器的订阅者,首先将 watcher 赋给 Dep.target,然后执行 getter 求值函数,当访问求值函数里面的属性(比如来自 dataprops 或其他 computed)时,会同样触发它们的 get 访问器函数从而将该计算属性的 watcher 添加到求值函数中属性的 watcher 的消息订阅器 dep 中,当这些操作完成,最后关闭 Dep.target 赋为 null 并返回求值函数结果。
    3. 当某个属性发生变化,触发 set 拦截函数,然后调用自身消息订阅器 depnotify 方法,遍历当前 dep 中保存着所有订阅者 wathcersubs 数组,并逐个调用 watcherupdate 方法,完成响应更新。

    你可以在创宇前端微信公众号(KnownsecFED)或掘金社区读到这篇文章的全文。

    1 条回复    2018-09-14 06:52:07 +08:00
    iRiven
        1
    iRiven  
       2018-09-14 06:52:07 +08:00 via Android
    第一次 调用一个 computed 方法 -> 搜集方法里面所有的依赖的变量
    依赖的变量更新 -> 通知被依赖的方法更新数据。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1151 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 23:27 · PVG 07:27 · LAX 15:27 · JFK 18:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.