Run results for: Vue Reactive vs Ref vs ShallowRef. Arrays

Test name	Executions per second
✓ ShallowRef	16,893 Ops/sec
Reactive	4,829 Ops/sec
Ref	4,724 Ops/sec

Reactive

const {reactive, computed} = Vue;

const dataTest = new Array(1000).fill(0).map((el, index) => ({id: index, name: `${index}`}))

const v = reactive({
  foo: dataTest
});

const bar = v.foo;

const frog = computed(()=>{
  return [...v.foo, {id: -1, name: '-1', }];
});

v.foo = new Array(1000).fill(0).map((el, index) => ({id: index + 1, name: `${index + 1}`}))

Ref

const {ref, computed} = Vue;

const dataTest = new Array(1000).fill(0).map((el, index) => ({id: index, name: `${index}`}))
const foo = ref(dataTest);

const bar = foo.value;

const frog = computed(()=>{
  return [...v.foo, {id: -1, name: '-1', }];
});

foo.value = new Array(1000).fill(0).map((el, index) => ({id: index + 1, name: `${index + 1}`}))

ShallowRef

const {shallowRef, computed} = Vue;

const dataTest = new Array(1000).fill(0).map((el, index) => ({id: index, name: `${index}`}))
const foo = shallowRef(dataTest);

const bar = foo.value;

const frog = computed(()=>{
  return [...v.foo, {id: -1, name: '-1', }];
});

foo.value = new Array(1000).fill(0).map((el, index) => ({id: index + 1, name: `${index + 1}`}))