reactive([1, 2, 3]) vs ref([])

[Christopher-Hayes]

I'm assuming it doesn't make a difference which is used because arrays are an object and both functions accept objects. But, is there a reason in the "Template Refs" documentation it uses one on one line and the the other on the next. Couldn't tell if that was done for a specific reason I didn't understand.

It's the bottom example of this page: https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for

The exact lines in the source are below.

https://github.com/vuejs/docs-next/blame/238422bded68f1d0260b89c3f9c3833831cd8cdc/src/guide/composition-api-template-refs.md#L72:L73

[skirtles-code]

I suggest asking questions on the Vue Discord. You'll usually get a quicker response that way. Generally this issues list is just for reporting problems with the documentation.

There is a good reason for using both ref and reactive in that example.

When you write reactive([]) you are making that array reactive. That allows Vue to track when that array is mutated but there's no way to change it for a different array.

When you write ref([]) it is equivalent to ref(reactive([])). Any object (including an array) passed to ref will be passed to reactive internally. Because the array is wrapped in a ref we also have a value property that can be used if we want to swap out that array for a different array.

That's the key difference in that example. One of the arrays needs to be reassigned in the onBeforeUpdate hook and we wouldn't be able to do that if it just used reactive.

They could both be written using ref but that would introduce an extra wrapper object for list that the example doesn't need.

There are other ways it could be written. In that example we never see divs used for anything, so whether it even needs reactivity is unclear. If it isn't needed outside the setup method then we could potentially assign a new value directly to divs itself (switching the const to let) and skip all the reactivity stuff altogether.

Another way of writing it would be to set the length to 0 rather than assigning a new array. Implemented that way it could use reactive instead of ref for both.

The current example tries to strike a balance. It doesn't show the other parts of the component, such as how list is modified or how divs is used. It shows the principle via a reasonable implementation but in practice it may be possible to simplify/complicate it depending the specifics.

[luckydonald]

Just gonna note that this answer was referenced on StackOverflow which wouldn't have been possible with locking it behind Discord.

[Christopher-Hayes]

I can see it going both ways. I understand the need to keep a project's issues clean. Though, I do agree the unpredictability of where to find a project's dev community, can be a hassle. Luckily, we now have GitHub discussions, which is perfect for this kind of question.
But, that's a very valid point @luckydonald, there's no way that I know of to reference/link Discord conversations.

[william-xue]

get it
“When you write ref([]) it is equivalent to ref(reactive([])). Any object (including an array) passed to ref will be passed to reactive internally. Because the array is wrapped in a ref we also have a value property that can be used if we want to swap out that array for a different array.”