Benchmark: Vue Reactive vs Ref

HTML Preparation code:

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

Tests:

Reactive
const {reactive, ref, computed} = Vue; const v = reactive({ foo: "bar" }); const bar = v.foo; const frog = computed(()=>{ return v.foo + "!"; }); v.foo = "foo"
Ref
const {reactive, ref, computed} = Vue; const foo = ref("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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Linux

View result in a separate tab

Test name	Executions per second
Reactive	1401706.4 Ops/sec
Ref	25268934.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The provided JSON represents two test cases for measuring the performance difference between using `reactive` and `ref` in Vue.js.

In essence, these tests are comparing the performance of two approaches:

1. **Reactive**: This approach uses the `reactive` function to create a reactive object that automatically updates when its properties change. In this case, the test creates an object with a single property (`foo`) and then accesses and modifies it using the `computed` function.
2. **Ref**: This approach uses the `ref` function to create a reference to a value, which can be updated independently of the reactive object.

**Options compared**

The two options being compared are:

* `reactive`: A higher-level abstraction that creates a reactive object, which can lead to more efficient updates and automatic dependency tracking.
* `ref`: A lower-level abstraction that allows for more fine-grained control over the creation and updating of values.

**Pros and cons of each approach**

* **Reactive**:
	+ Pros: Automatic dependency tracking, easier to use, less boilerplate code required.
	+ Cons: Less control over the update process, may lead to slower performance due to automatic updates.
* **Ref**:
	+ Pros: More control over the update process, potentially faster performance since updates are explicitly managed.
	+ Cons: Requires more boilerplate code, less intuitive for beginners.

**Library and purpose**

In this benchmark, `reactive` and `ref` are functions from the Vue.js library. They provide a way to create reactive objects or references to values, which can be useful in building data-driven user interfaces.

**Special JS feature or syntax**

There is no special JavaScript feature or syntax being tested here. The tests only involve basic object manipulation, function calls, and property access.

**Other alternatives**

If you're looking for alternative approaches to `reactive` and `ref`, you could consider using other libraries or techniques, such as:

* Observables: A library like RxJS that provides a similar concept of reactive objects.
* Proxy: The `Proxy` constructor in JavaScript can be used to create a proxy object that intercepts property access and updates.
* Custom solutions: You could implement your own reactive system using a combination of functions, closures, and events.

However, these alternatives may not provide the same level of convenience or performance as Vue's built-in `reactive` and `ref` functions.

Related benchmarks:

Vue Reactive vs Ref (version: 0)

Comparing performance of: Reactive vs Ref

Created: 3 years ago by: Registered User

Jump to the latest result

Reactive

Ref

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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