Vue生命周期

---

生命周期的基本概念

生命周期，其实就是一个组件从 创建(出生) 到 销毁(死亡) 的过程，在这个过程中的不同阶段，会触发不同的函数，也叫，生命周期钩子函数。
我们可以在这些函数中，完成我们想要完成的逻辑，如：在虚拟dom挂载真实dom之前，获取服务器数据，然后再渲染到页面、或者在离开一个组件之前，停止此组件的所有计时器等等……

这里先给大家放一张图片，大家可以先简单了解一下，后面会详细讲解

语法

选项式api的语法：

export default {
    data() {
        return {
            text: '这是一个选项式api下的数据'
        };
    },
    beforeCreate(){
        console.log( '组件实例创建之前' );
    },
    created(){
        console.log( '组件实例创建完毕' );
    },
    beforeMount(){
        console.log( '虚拟dom挂载真实dom之前' );
    },
    mounted(){
        console.log( '虚拟dom挂载真实dom完毕' );
    },
};

组合式api的语法：（这里直接写的 setup语法糖，因为这种写法更主流一点 ）

<script setup>
import { onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
let text = ref(' 这是一个语法糖下的数据 ');

onBeforeMount(() => {
    console.log('虚拟dom挂载真实dom之前');
});
onMounted(() => {
    console.log('虚拟dom挂载真实dom之后');
});
onBeforeUpdate(() => {
    console.log('数据更新,但未渲染到真实dom');
});
onUpdated(() => {
    console.log('数据更新,已经渲染到真实dom');
});
onBeforeUnmount(() => {
    console.log('组件销毁之前');
});
onUnmounted(() => {
    console.log('组件销毁完毕');
});
</script>

在setup语法糖中，是没有created和beforeCreate 这两个钩子函数的！要注意！

而且在组合式api的语法下，要在这些钩子函数前边加 on ，并且执行逻辑是，在写一个回调函数！

总结

vue生命周期这些知识点很简单，不过却很好用，比如我们在做一些页面初始化的时候，就可以利用这些钩子函数来完成我们想要的逻辑。
本人只是一个学生，如果有不足的地方，请大家多多指正！O(∩_∩)O