上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

关于Vue源码childob.dep.depend问题

[复制链接]
  • TA的每日心情
    开心
    6 小时前
  • 签到天数: 59 天

    [LV.5]常住居民I

    354

    主题

    3139

    帖子

    3136

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3136

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2021-10-28 00:16:50 | 显示全部楼层 | 阅读模式

    前文

    我一直有一个疑问,就是vue的源码defineRective部分的childob.dep.depend这行代码到底有什么作用

    export function defineReactive (
      obj: Object,
      key: string,
      val: any,
      customSetter?: ?Function,
      shallow?: boolean
    ) {
      const dep = new Dep()
    
      const property = Object.getOwnPropertyDescriptor(obj, key)
      if (property && property.configurable === false) {
        return
      }
    
      // cater for pre-defined getter/setters
      const getter = property && property.get
      const setter = property && property.set
      if ((!getter || setter) && arguments.length === 2) {
        val = obj[key]
      }
    
      let childOb = !shallow && observe(val)
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
          const value = getter ? getter.call(obj) : val
          if (Dep.target) {
            dep.depend()
            if (childOb) {
              childOb.dep.depend()
              if (Array.isArray(value)) {
                dependArray(value)
              }
            }
          }
          return value
        },
        set: function reactiveSetter (newVal) {
          const value = getter ? getter.call(obj) : val
          /* eslint-disable no-self-compare */
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== 'production' && customSetter) {
            customSetter()
          }
          // #7981: for accessor properties without setter
          if (getter && !setter) return
          if (setter) {
            setter.call(obj, newVal)
          } else {
            val = newVal
          }
          childOb = !shallow && observe(newVal)
          dep.notify()
        }
      })
    }

    childob.dep.depend其主要目的就是在数组以及对象进行Vue.set的时候进行触发响应

    那设置成获取属性的时候dep直接响应难道不可以么?

    比如在获取childOb的时候

    let childOb = !shallow && observe(val, dep)

    将definedproperty的时候的闭包dep传入

    这样就不需要再运行childOb.dep.depend收集依赖了

    根据我个人的测试

    认为这行代码更像是一种设计思想,在将源码修改成获取属性的封闭dep之后单测依然可以正常通过

    HeadlessChrome 78.0.3882 (Windows 10.0.0): Executed 1248 of 1248 (1 FAILED) (15.102 secs / 14.846 secs)
    TOTAL: 1 FAILED, 1247 SUCCESS

    唯一的一个失败是

    HeadlessChrome 78.0.3882 (Windows 10.0.0) Observer observing object prop change FAILED
            Expected 2 to be 3.
                at UserContext.<anonymous> (webpack:///test/unit/modules/observer/observer.spec.js:195:32 <- index.js:61131:33)
            Expected 2 to be 3.
                at UserContext.<anonymous> (webpack:///test/unit/modules/observer/observer.spec.js:200:41 <- index.js:61139:42)
            Expected 3 to be 4.
                at UserContext.<anonymous> (webpack:///test/unit/modules/observer/observer.spec.js:207:32 <- index.js:61145:33)

    检测代码如下

        expect(watcher.deps.length).toBe(3) // obj.a + a + a.b
        obj.a.b = 3
        expect(watcher.update.calls.count()).toBe(1)
        // swap object
        obj.a = { b: 4 }
        expect(watcher.update.calls.count()).toBe(3)
        watcher.deps = []
    
        Dep.target = watcher
        obj.a.b
        obj.c
        Dep.target = null
        expect(watcher.deps.length).toBe(4)

    这个我认为是完全不影响的

    所以我更倾向于childob.dep.depend是一种设计思想,将其改为子继承父dep属性也算是完全可以实现的。

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    昨天 09:33
  • 签到天数: 70 天

    [LV.6]常住居民II

    153

    主题

    2036

    帖子

    2161

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2161

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

    发表于 2021-10-28 10:33:43 | 显示全部楼层
    改了一行,然后全崩了?
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表