Vue 3 composition API - ref() vs reactive() for arrays

Question

The guidance in Vue 3 documentation and in folk literature is that ref() is for scalars and primitives, while reactive() is for Objects.

However, in JavaScript, arrays are a special case of Object. Notwithstanding issues such as monitoring nested object elements for new property additions and other wrinkles, is there a best practice on whether to handle arrays as ref or reactive, whether from a performance perspective or any other?

Answer 1

I would use ref for primitive values as you already mentioned. For object type (objects or Arrays), I would advice to use the reactive property. This makes your code easier to read and removes the ".value" you would have to add when using the ref property.