Benchmark: Vue Reactive vs Ref vs ShallowRef

HTML Preparation code:

<script src="https://unpkg.com/vue@3"></script>

Tests:

Reactive
const {reactive, computed} = Vue; const v = reactive({ foo: "bar" }); const bar = v.foo; const frog = computed(()=>{ return v.foo + "!"; }); v.foo = "foo"
Ref
const {ref, computed} = Vue; const foo = ref("bar"); const bar = foo.value; const frog = computed(()=>{ return foo.value + "!"; }); foo.value = "foo"
ShallowRef
const {shallowRef, computed} = Vue; const foo = shallowRef("bar"); const bar = foo.value; const frog = computed(()=>{ return foo.value + "!"; }); foo.value = "foo"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reactive
Ref
ShallowRef

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Reactive	175533.6 Ops/sec
Ref	5469748.5 Ops/sec
ShallowRef	6137715.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark code to understand what's being tested.

**Benchmark Definition**

The benchmark is comparing three approaches in Vue.js: `reactive`, `ref`, and `shallowRef`. These are all used for managing state in Vue components, but they have different use cases and performance implications.

**Options Compared**

Here's a brief overview of each option:

1. **Reactive**: This approach uses a reactive system to manage state changes. When the state is updated, it triggers a re-rendering of the component.
2. **Ref**: This approach uses a reference object to store state. It provides a way to update the value of the reference without triggering a re-render.
3. **ShallowRef**: This approach is similar to `ref`, but it only updates the top-level value of the shallow ref, whereas `ref` can be updated recursively.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Reactive**:
	* Pros: Easy to use, provides a way to react to state changes.
	* Cons: Can lead to unnecessary re-renders when the underlying data doesn't change.
2. **Ref**:
	* Pros: Provides more control over state updates and can be used for complex state management.
	* Cons: Requires more code and can be slower than reactive approaches.
3. **ShallowRef**:
	* Pros: Similar to `ref`, but with less overhead due to only updating the top-level value.
	* Cons: Can be tricky to use, especially when dealing with recursive updates.

**Library and Purpose**

None of these options rely on an external library. They are all built-in features of Vue.js.

**Special JS Features or Syntax**

None mentioned.

**Benchmark Results**

The benchmark results show the number of executions per second for each test case:

* `Ref`: 8823568.0 executions per second
* `ShallowRef`: 8786086.0 executions per second
* `Reactive`: 413783.84375 executions per second

It appears that `ref` is slightly faster than `shallowRef`, while `reactive` is slower.

**Other Alternatives**

If you're looking for alternative state management approaches in Vue.js, some options include:

1. **Composition API**: A newer API for managing state and side effects in Vue components.
2. **Store**: A centralized store for managing global state in a Vue application.
3. **Vuex**: A popular library for state management in Vue applications.

Each of these alternatives has its own trade-offs and use cases, so it's worth exploring their documentation to determine which one best fits your project's needs.

Related benchmarks:

Vue Reactive vs Ref vs ShallowRef (version: 0)

Comparing performance of: Reactive vs Ref vs ShallowRef

Created: one year ago by: Guest

Jump to the latest result

Reactive

Ref

ShallowRef

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):