[VueJS] Migrate Vue2 to Vue3 CompositionAPI (script setup)

Sau quá trình chuyển đổi từ Vue2 sang Vue3 CompositionAPI, mình đã đúc kết một vài ghi chú nho nhỏ để giúp anh em dễ dàng nắm bắt hơn trong việc migrate Vue2 => Vue3 CompositionAPI (script setup).

1. Life circle

1.1. beforeCreate và created => setup

Vue2

beforeCreate() { }
created() { }

Vue3

<script setup>
 // todo (Gọi hàm xử lý bên trong setup)
</script>

1.2. beforeMount => onBeforeMount

Vue2

beforeMount() { }

Vue3

import { onBeforeMount } from 'vue';
onBeforeMount(() => { })

1.3. mounted => onMounted

Vue2

mounted() { }

Vue3

import { onMounted } from 'vue';
onMounted(() => { })

1.4. beforeUpdate => onBeforeUpdate

Vue2

beforeUpdate() { }

Vue3

import { onBeforeUpdate } from 'vue';
onBeforeUpdate(() => { })

1.5. updated => onUpdated

Vue2

updated() { }

Vue3

import { onUpdated } from 'vue';
onUpdated(() => { })

1.6. beforeDestroy => onBeforeUnmount

Vue2

beforeDestroy() { }

Vue3

import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => { })

1.7. destroyed => onUnmounted

Vue2

destroyed() { }

Vue3

import { onUnmounted } from 'vue';
onUnmounted(() => { })

2. Data

Vue2

data() {
    return {
        number: 1
    }
}

console.log(this.number);

Vue3

import { ref } from 'vue';
const number = ref(1);

console.log(number.value);

3. Props

Vue2

props: {
    name: String
}

console.log(this.name);

Vue3

const props = defineProps({
    name: String
})

console.log(props.name);

4. Methods

Vue2

methods: {
    handleNumber() { }
}

Vue3

function handleNumber() { }

5. Computed

Vue2

computed: {
    getList() {
        return 1;
    }
}

Vue3

import { computed } from 'vue'; 
const getList = computed(() => { 
    return 1;
})

- nếu gọi trong template => như Vue2 {{ getList }}
- nếu gọi trong <script setup> => getList.value

6. Watch

Vue2

watch: {
    numberValue: {
        immediate: true,
        deep: true,
        handler(newVal, oldVal) { }
    }
}

Vue3

import { watch } from 'vue';
watch(() => numberValue.value, (newVal, oldVal) => {

}, { immediate: true, deep: true })

7. Emit

Vue2

this.$emit("clickltem")

Vue3

const emit = defineEmits(['cliickltem'])
emit('clickltem')

8. Event Bus

Vue2

var eventBus = new Vue();
eventBus.$emit('event')
eventBus.$on('event', () => { })

Vue3

import mitt from 'mitt';

var eventBus = mitt();
eventBus.emit('event')
eventBus.on('event', () => { })

9. $ref

<div ref="refDiv"></div>

Vue2

this.$ref.refDiv

Vue3

import {ref} from 'vue';
const refDiv = ref();
=> refDiv.value;

10. $el và $children

Vue2

this.$el
this.$children

Vue3

Trong vue3 không còn hỗ trợ $el, $children.
Nên để xử lý, anh em sử dụng $ref nhé.

Kết

Đây là một vài ghi chú của mình về việc migrate từ Vue2 sang Vue3 CompositionAPI (script setup). Nếu có gì cần sửa đổi, anh em comment dưới bài viết để giúp mình cải thiện bài post này nhé. Tks anh em!