vue3生命周期函数使用及说明(挂载、更新、销毁)
作者：冰凉小脚
文章对比了Vue2和Vue3的生命周期函数,指出Vue3在Vue2的基础上增加了on前缀的生命周期,移除了了创建前后的生命周期钩子,并引入了setup和onUnmount等等新特性,文章强调了在单页面中生命函数可以多次使用,并提供了表格对比帮助理解
vue3生命周期函数(挂载、更新、销毁)
在这之前，相必用户也是用过vue2的经历，所以，在讲解之前先对vue2和vue3的生命周期进行对比：
| Option API | 组合API |
|---|---|
| beforeCreate | -setup |
| created | -setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
通过表格对比可以看出
1、vue3的生命周期就是在vue2的基础上前面增加（on）
2、vue3去除创建前后生命钩子，取而代之的为setup
3、销毁变了 onUnmounted , onBeforeUnmount
使用举例
<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup--创建前/后');
onBeforeMount(() => {
console.log('onBeforeMount--挂载前')
})
onMounted(() => {
console.log('onMounted--挂载后')
})
onBeforeUpdate(() => {
console.log('onBeforeUpdate--更新前')
})
onUpdated(() => {
console.log('onUpdated--更新后')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount--销毁前')
})
onUnmounted(() => {
console.log('onUnmounted--销毁后')
})
</script>注：
在vue3中，单个页面中一个生命函数可以多次使用
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。