How performant is Vue 3's provision/injection?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

How performant is Vue 3's provision/injection?

P粉946336138 2023-08-26 09:46:02

361

<p>I work on a project that relies on application-level <code>provide</code> for global state management. At first, the <code>provide</code>d object was small, but it grew as the project grew. </p> <p>How much impact will it have on application performance by injecting this object where the data is needed? Without implementing a global state management tool like Pinia, is it worth breaking the large objects we provide into separate objects to provide "chunks" of data where needed? </p>

P粉946336138

reply all(1)

P粉8541192632023-08-27 00:50:55 1 floor

I've done some basic benchmarking and was wondering if frequently used variables should be provided/injected, or if they should be accessed from the Pinia store in a large number of components.

The results show that there is no significant performance difference.

My first test case is very basic: Providing/injecting a single bool is not the same as getting it from the Pinia storage in the component and rendering the component multiple times. 50k components took between 20-24 seconds to render, also using provide/inject and using Pinia. There's no consistent difference to say either one is faster/slower.

In the second test, I used a larger object, an array of about 1MiB of data (measured in a JSON print without spaces). The difference is also not significant. I've rendered 50k components and both using injection and storage access took about the same amount of time, between 19-26 seconds.

The components in each case render the boolean value of the theme variable, so their rendering time does not increase with large data vs. small boolean values.

After all, I've come to the conclusion that there really isn't any meaningful difference between provide/inject and the Pinia store. The only obvious difference is that performance is less stable with larger data and more predictable with smaller data. No matter how many times I repeat the test on the boolean values, the time is always between 20-24 seconds and as the data increases I get some outliers like 19 seconds or 26 seconds. Again nothing consistent, this could just be a fluctuation in my actual CPU usage and nothing to do with Provide/inject vs. Pinia store usage.

I tested on Chrome v110 (x86_64) on macOS using [email protected] and [email protected].

Test code I used: