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

When migrating from Vue2 to Vue3, you might encounter some challenges when trying to replace fluid $refs arrays with function refs, constant duplicates, and reactive data. In this answer, I will provide a comprehensive and detailed explanation of these issues and how to solve them.

Replacing fluid $refs arrays with function refs:

In Vue2, you could access components' refs using a fluid $refs array. However, in Vue3, you need to use the ref() function to create a ref object and assign it to a component's ref property. Here's an example:

Vue2:

export default {
  data() {
    return {
      childRef: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.childRef = this.$refs.child;
    });
  }
};

Vue3:

import { ref } from 'vue';

export default {
  setup() {
    const childRef = ref(null);

    onMounted(() => {
      childRef.value = document.querySelector('#child');
    });

    return { childRef };
  }
};

Constant duplicates:

In Vue3, you cannot have duplicate reactive properties in the same component. This means that if you have a constant value that you were using as a property in Vue2, you need to extract it to a separate variable or use a computed property in Vue3. Here's an example:

Vue2:

export default {
  data() {
    return {
      message: 'Hello World',
      greeting: 'Greetings'
    };
  },
  methods: {
    greet() {
      console.log(this.greeting + ' ' + this.message);
    }
  }
};

Vue3:

import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello World');
    const greeting = ref('Greetings');

    const greet = () => {
      console.log(greeting.value + ' ' + message.value);
    };

    return { message, greeting, greet };
  }
};

Or:

import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello World');

    const greeting = computed(() => 'Greetings');

    const greet = () => {
      console.log(greeting.value + ' ' + message.value);
    };

    return { message, greet };
  }
};

Reactive data:

In Vue3, you can use the reactive() function to create a reactive object or use the setup() function to create a reactive component instance. Here's an example of using reactive():

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'John Doe'
});

function increment() {
  state.count++;
}

And here's an example of using setup():

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('John Doe');

    const increment = () => {
      count.value++;
    };

    const state = reactive({ count, name });

    return { count, name, increment, state };
  }
};

In summary, when migrating from Vue2 to Vue3, you need to replace fluid $refs arrays with function refs, handle constant duplicates by extracting them to separate variables or using computed properties, and use reactive() or setup() to create reactive data.