Benchmark: Vue Reactive vs ES statement

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"
ES statement with computed
const {computed} = Vue; let foo = "bar"; const bar = foo; const frog = computed(()=>{ return foo + "!"; }); foo = "foo"
ES statement without computed
let foo = "bar"; const bar = foo; const frog = foo + "!"; foo = "foo"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reactive
Ref
ShallowRef
ES statement with computed
ES statement without computed

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reactive	504043.9 Ops/sec
Ref	9432546.0 Ops/sec
ShallowRef	10268178.0 Ops/sec
ES statement with computed	11649979.0 Ops/sec
ES statement without computed	174936592.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**What is being tested?**

MeasureThat.net is testing four different approaches for creating reactive state in a Vue.js application:

1. **Reactive**: Using `reactive` from Vue to create a reactive state object.
2. **Ref**: Using `ref` from Vue to create a reactive reference variable.
3. **ShallowRef**: Using `shallowRef` from Vue to create a shallow-reactive reference variable.
4. **ES statement with computed**: Using ES6 syntax to define a computed property on a plain JavaScript object.
5. **ES statement without computed**: Using ES6 syntax to assign a value to a plain JavaScript variable and then using the value in an expression.

**Options comparison**

Each test case compares the performance of each approach. Here's a brief summary:

* **Reactive**: This approach creates a reactive state object using `reactive`. The state is observed by Vue, which updates the state when it changes.
* **Ref**: This approach creates a reactive reference variable using `ref`. The reference is observed by Vue, which updates the value when it changes.
* **ShallowRef**: This approach creates a shallow-reactive reference variable using `shallowRef`. The reference is only updated when its value changes directly, not when another property of the object changes.
* **ES statement with computed**: This approach uses ES6 syntax to define a computed property on a plain JavaScript object. The computation is done in one step, which can lead to slower performance due to the overhead of function creation and execution.
* **ES statement without computed**: This approach uses ES6 syntax to assign a value to a plain JavaScript variable and then using the value in an expression. This approach is similar to the previous one but avoids the overhead of creating a computed property.

**Pros and Cons**

Here are some pros and cons for each approach:

* **Reactive**:
	+ Pros: Easy to use, efficient updates.
	+ Cons: Can lead to memory leaks if not properly cleaned up.
* **Ref**:
	+ Pros: Efficient updates, easy to use.
	+ Cons: Only observes the value of the reference variable, not other properties.
* **ShallowRef**:
	+ Pros: More efficient than reactive for small objects, easier to use.
	+ Cons: Only observes changes to the shallow property of the object.
* **ES statement with computed**:
	+ Pros: Easy to use, avoids some overhead of function creation.
	+ Cons: Can lead to slower performance due to function creation and execution.
* **ES statement without computed**:
	+ Pros: Avoids overhead of creating a computed property.
	+ Cons: Requires careful assignment and usage of the variable.

**Library**

The `Vue` library is used throughout these tests. It provides a set of functions and APIs for building reactive user interfaces. The specific functions used are:

* `reactive`: Creates a reactive state object.
* `ref`: Creates a reactive reference variable.
* `shallowRef`: Creates a shallow-reactive reference variable.
* `computed`: Defines a computed property on an object.

**Special JS features or syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. It's all about comparing the performance of different approaches for creating reactive state in a Vue.js application.

I hope this explanation helps! Let me know if you have any further questions.

Related benchmarks:

Vue Reactive vs ES statement (version: 0)

Comparing performance of: Reactive vs Ref vs ShallowRef vs ES statement with computed vs ES statement without computed

Created: 2 years ago by: Guest

Jump to the latest result

Reactive

Ref

ShallowRef

ES statement with computed

ES statement without computed

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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