Run results for: Vue Reactive literal vs Vue Reactive class vs Ref multiple

Run details:

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

Browser: Chrome 103

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Reactive	175640.5 Ops/sec
Ref	1251785.8 Ops/sec
Reactive class object	51778.6 Ops/sec
Reactive class object - initialize fields	56810.8 Ops/sec

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"

Run results for: Vue Reactive literal vs Vue Reactive class vs Ref multiple

Reactive

Ref

Reactive class object

Reactive class object - initialize fields