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!