13.Vue3.x中组件的生命周期函数（lifecycle）、 this.$nextTick、动态组件 keep-alive、Vue实现Tab切换

一、Vue3.x中组件的生命周期函数

摘自官网的图

LifeCycle.vue组件

<template>
    <h2>生命周期函数演示</h2>
</template>

<script>
    export default {
    
        name: "",
        data() {
    
            return {
    }
        },
        methods: {
    },
        beforeCreate() {
    
            console.log("实例刚刚被创建1")
        },
        created() {
    
            console.log("实例已经创建完成2")
        },
        beforeMount() {
    
            console.log("模板编译之前3")
        },
        mounted() {
    
            // 请求数据，操作dom，放在这个里面 mounted
            console.log("模板编译完成4")
        },
        beforeUpdate() {
    
            console.log("数据更新之前")
        },
        updated() {
    
            console.log("数据更新完毕")
        },
        activated() {
    
            console.log("keep-alive缓存的组件激活时调用")
        },
        deactivated() {
    
            console.log("keep-alive缓存的组件停用时调用")
        },
        beforeUnmount() {
    // vue2.x中叫beforeDestroy
            // 页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数
            console.log("实例销毁之前")
        },
        unmounted() {
    // vue2.x中叫destroyed
            console.log("实例销毁完成")
        }
    }
</script>

<style scoped>