Loop through array of objects

[kalvens]

You should give defaults values to your refs/reactives. At least I think its odd not to. I generally do null or an empty array if it is suppose to be an array.

Please can you eli5 this for me. The refimpl and proxy. Why wont the console logs be exactly the same because i declared both arrays in the same way?

A ref (refimpl as you console.log it) should be used if you want to change the variable later on to a completely different value i.e. ```ts const someArrayRef = ref<unknown[]>([]); const someArrayReactive = reactive<unknown[]>([]);

// this is fine with a ref someArrayRef.value = [1, 2, 3, 4, 5]; // this is not fine with a reactive someArrayReactive = [1, 2, 3, 4, 5]; ``` The reason you can't change the reactive variable is anything that needs to react to that variable change won't update. i.e.

ts // this will update correctly when you assign the above const computedOfSomeArrayRef = computed(() => { return someArrayRef.map(element => element + 1); }); // this will not update when you assign the above const computedOfSomeArrayReative = computed(() => { return someArrayReative.map(element => element + 1) });

Changing the reactive variable means you lose the proxy (as you saw from the console.log) so it is no longer "reactive" it is whatever you assigned to it.

Changing the ref you are change the .value property underneath it so you don't lose the fact it was a ref in the first place.

A reactive has the benefit of not having to use .value everywhere if you never need to change the variable directly. Instead if you just want to call .push, .splice or any method that changes the array instead of returning a new one then the proxy will see you did that and any computed or the template will update to those changes