- vừa được xem lúc

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

0 0 9

Người đăng: Phạm Đình Thiện

Theo Viblo Asia

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!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Từng bước học Vue2 Tập 13

Giới thiệu cơ bản về Vue 2. Xin chào các bạn, hôm nay mình đã quay trở lại để tiếp tục với web-pack và vue-cli vue-loader ở tập 12 trước.

0 0 22

- vừa được xem lúc

Từng bước học Vue2 Tập 12

Giới thiệu cơ bản về Vue 2. Lại là mình quay trở lại với series Từng bước học Vue2.

0 0 24

- vừa được xem lúc

Từng bước học Vue2 Tập 11

Giới thiệu cơ bản về Vue 2. Chào mừng các bạn đã quay trở lại với series Từng bước học Vue2 tập 11.

0 0 21

- vừa được xem lúc

Từng bước học Vue2 Tập 16

Giới thiệu cơ bản về Vue 2. Xin chào lại là mình quay trở lại với series về Vue2.

0 0 17

- vừa được xem lúc

Sử dụng nextTick trong vuejs

Nguồn:. https://vuejs.org/api/general.html#nexttick.

0 0 2

- vừa được xem lúc

Tôi đã tạo một custom hook trong Vue 3 thế nào?

Xin chào mọi nguời , mình là một coder vô danh kinh nghiệm chưa nhiều lần đầu viết bài nên bố cục , từ ngữ, kiến thức có chỗ chưa được đúng mong mọi người góp ý nhẹ tay ạ. . . .

0 0 236