Vue3 migration: problems replacing fluid $refs array with function ref, constant duplicates and $refs.length.

When migrating from Vue2 to Vue3, one of the major changes is the way we handle refs. In Vue2, we used to use $refs to access the DOM elements or components, but in Vue3, we have to use ref function to create a reactive reference.

However, there are some challenges when migrating from Vue2 to Vue3, especially when dealing with arrays of refs and dynamic components. In this answer, we will discuss the problems that might arise when replacing fluid $refs array with function ref, constant duplicates, and $refs.length.

Problems with replacing fluid $refs array with function ref:

In Vue2, we could access multiple refs using an array of refs, which was very convenient when dealing with dynamic components or multiple elements with the same ref. However, in Vue3, we cannot create an array of refs directly. Instead, we have to create each ref individually using the ref function.

For example, in Vue2, we could do:

const refs = [];
this.$nextTick(() => {
  refs.push(this.$refs.myComponent);
});

But in Vue3, we have to do:

const myComponentRef = ref(null);
onMounted(() => {
  myComponentRef.value = document.querySelector('#my-component');
});

And if we have multiple elements with the same ref, we have to create multiple refs:

const ref1 = ref(null);
const ref2 = ref(null);
onMounted(() => {
  ref1.value = document.querySelector('#my-component1');
  ref2.value = document.querySelector('#my-component2');
});

This can lead to a lot of repetition and make the code less readable and less maintainable.

Problems with constant duplicates:

In Vue2, we could use the same ref name for multiple elements, and Vue would automatically create unique refs for each element. However, in Vue3, we have to create unique refs manually, which can lead to constant duplicates.

For example, in Vue2, we could do:

const ref = 'my-ref';
this.$nextTick(() => {
  const el1 = this.$refs[ref];
  const el2 = this.$refs[ref];
  // el1 and el2 are different elements, but they share the same ref name
});

But in Vue3, we have to create unique refs for each element:

const ref1 = ref('my-ref1');
const ref2 = ref('my-ref2');
onMounted(() => {
  ref1.value = document.querySelector('#my-component1');
  ref2.value = document.querySelector('#my-component2');
});

This can lead to a lot of duplication and make the code less efficient.

Problems with $refs.length:

In Vue2, we could use $refs.length to get the number of refs that were registered. However, in Vue3, there is no equivalent property for refs.length. Instead, we have to use the refs array directly or use a reactive array to keep track of the refs.

For example, in Vue2, we could do:

const refs = this.$refs;
console.log(refs.length);

But in Vue3, we have to do:

const refs = reactive([]);
onMounted(() => {
  refs.push(document.querySelector('#my-component'));
});
console.log(refs.length);

Or we could use a ref to keep track of the number of refs:

const refCount = ref(0);
onMounted(() => {
  refCount.value++;
});
console.log(refCount.value);

This can add some complexity to the code and make it less readable.

In conclusion, migrating from Vue2 to Vue3 can be challenging when dealing with refs, especially when replacing fluid $refs array with function ref, constant duplicates, and $refs.length. However, with some careful planning and refactoring, we can overcome these challenges and take advantage of the new features and improvements that Vue3 offers.