Slow performance using getter references other getter

Version

3.1.2

Reproduction link

https://jsfiddle.net/tbetous/y4m0keav/53/

Steps to reproduce

1 - Write a getter myGetter that use another getter otherGetter by using getters argument

myGetter: (state, getters) => {
      console.time('myGetter')
      const t0 = performance.now();
      for(let i = 0; i < 100; i  ) {
        const foo = getters.otherGetter
      }
      console.timeEnd('myGetter')
      const t1 = performance.now();
      return t1 - t0
    },

2 - Write a getter myGetterOptimized that use another getter otherGetter by destructuring getters

myGetterOptimized: (state, {otherGetter}) => {
      console.time('myGetterOptimized')
      const t0 = performance.now();
      for(let i = 0; i < 100; i  ) {
        const foo = otherGetter
      }
      console.timeEnd('myGetterOptimized')
      const t1 = performance.now();
      return t1 - t0
    },

3 - Compare time execution

What is expected?

Time execution should be the same.

What is actually happening?

Time execution is different :

• getterOptimized : 0.21999999989930075
• getterNotOptimized : 494.8850000000675

[tbetous]

Thanks a lot @kiaking ! You answered to my question ! I guess I can close the issue.

[Kasheftin]

@cuebit If we track the getter’s calculation, we find that it’s calculated only once no matter if called in a cycle or before the cycle. https://jsfiddle.net/kasheftin/9oh3svn2/ - here’s the slightly updated version, where getter calc included into timeline. It shows the same difference. I would say that the real reason of this huge difference is that any vuex getter provides a Proxy, calling the getter requests Proxy.get method, and the last has some inner logic like dependency tracking.