Benchmark: Vue Reactive literal vs Vue Reactive class vs Ref multiple

HTML Preparation code:

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

Tests:

Reactive
const {reactive, ref, computed} = Vue; const v = reactive({ foo: "bar", fooA: "barA", fooB: "barB", fooC: "barC", fooD: "barD" }); const bar = v.foo; const frog = computed(()=>{ return v.foo + "!"; }); v.foo = "foo" const barA = v.fooA; const frogA = computed(()=>{ return v.fooA + "!"; }); v.fooA = "foo" const barB = v.fooB; const frogB = computed(()=>{ return v.fooB + "!"; }); v.fooB = "foo" const barC = v.fooC; const frogC = computed(()=>{ return v.fooC + "!"; }); v.fooC = "foo" const barD = v.fooD; const frogD = computed(()=>{ return v.fooD + "!"; }); v.fooD = "foo"
Ref
const {reactive, ref, computed} = Vue; const foo = ref("bar"); const fooA = ref("barA"); const fooB = ref("barB"); const fooC = ref("barC"); const fooD = ref("barD"); const bar = foo.value; const frog = computed(()=>{ return foo.value + "!"; }); foo.value = "foo" const barA = fooA.value; const frogA = computed(()=>{ return fooA.value + "!"; }); fooA.value = "foo" const barB = fooB.value; const frogB = computed(()=>{ return fooB.value + "!"; }); fooB.value = "foo" const barC = fooC.value; const frogC = computed(()=>{ return fooC.value + "!"; }); fooC.value = "foo" const barD = fooD.value; const frogD = computed(()=>{ return fooD.value + "!"; }); fooD.value = "foo"
Reactive class object
const {reactive, ref, computed} = Vue; class Bar { constructor(){ this.foo = "bar"; this.fooA = "barA"; this.fooB ="barB"; this.fooC ="barC"; this.fooD ="barD" } } const v = reactive(new Bar()); const bar = v.foo; const frog = computed(()=>{ return v.foo + "!"; }); v.foo = "foo" const barA = v.fooA; const frogA = computed(()=>{ return v.fooA + "!"; }); v.fooA = "foo" const barB = v.fooB; const frogB = computed(()=>{ return v.fooB + "!"; }); v.fooB = "foo" const barC = v.fooC; const frogC = computed(()=>{ return v.fooC + "!"; }); v.fooC = "foo" const barD = v.fooD; const frogD = computed(()=>{ return v.fooD + "!"; }); v.fooD = "foo"
Reactive class object - initialize fields
const {reactive, ref, computed} = Vue; class Bar { foo; fooA; fooB; fooC; fooD; constructor(){ this.foo = "bar"; this.fooA = "barA"; this.fooB ="barB"; this.fooC ="barC"; this.fooD ="barD" } } const v = reactive(new Bar()); const bar = v.foo; const frog = computed(()=>{ return v.foo + "!"; }); v.foo = "foo" const barA = v.fooA; const frogA = computed(()=>{ return v.fooA + "!"; }); v.fooA = "foo" const barB = v.fooB; const frogB = computed(()=>{ return v.fooB + "!"; }); v.fooB = "foo" const barC = v.fooC; const frogC = computed(()=>{ return v.fooC + "!"; }); v.fooC = "foo" const barD = v.fooD; const frogD = computed(()=>{ return v.fooD + "!"; }); v.fooD = "foo"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reactive
Ref
Reactive class object
Reactive class object - initialize fields

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reactive	201562.2 Ops/sec
Ref	1216456.0 Ops/sec
Reactive class object	75578.2 Ops/sec
Reactive class object - initialize fields	65398.5 Ops/sec

Vue Reactive literal vs Vue Reactive class vs Ref multiple (version: 0)

Comparing performance of: Reactive vs Ref vs Reactive class object vs Reactive class object - initialize fields

Created: one year ago by: Registered User

Jump to the latest result

Reactive

Ref

Reactive class object

Reactive class object - initialize fields

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A