生命周期函数完整

Vue官网: http://cn.vuejs.orgs

钩子函数，就是在组件挂载、更新、销毁的时候触发的一系列的方法

这些方法就叫做生命周期函数。

















Vue官网-生命周期：
https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
常用的生命周期函数：
· 选项 / 生命周期钩子
beforeCreate -----------------实例创建之前
created ------------------实例创建完成
beforeMount -----------------模板编译之前
mounted -----------------------模板编译完成(请求数据调用这个方法)
beforeUpdate ------------------数据更新之前
updated -------------------数据更新完成
activated
deactivated
beforeDestroy -----------------实例销毁之前（页面销毁前,保存数据调用此方法）
destroyed ------------------实例销毁完成
errorCaptured

钩子函数，就是在组件挂载、更新、销毁的时候触发的一系列的方法
这些方法就叫做生命周期函数。

1、mounted -----------------------页面刷新时加载此函数

<script>
export default {

    data(){
        return{
           msg: 'Header.vue!'
        }
    },
    beforeCreate(){
    
        console.log("==【beforeCreate】==实例创建之前===");

    },
    created(){

        console.log("==【created】==实例创建完成===");

    },
    beforeMount(){

        console.log("==【beforeMount】==模板编译之前===");

    },
    mounted(){/**请求数据放在这个页面 */
        
        console.log("==【mounted】==模板编译完成===");

    },
    beforeUpdate(){

        console.log("==【beforeUpdate】==数据更新之前===");

    },
    update(){

        console.log("==【update】==数据更新完成===");

    },
    activated(){

         console.log("==【activated】=====");

    },
    deactivated(){

         console.log("==【deactivated】=====");

    },
    beforeDestory(){/**页面销毁的时候要保存数据,可以监听此方法 */

        console.log("==【beforeDestory】==实例销毁之前===");

    },
    destoryed(){

        console.log("==【destoryed】==实例销毁完成===");

    },
    errorCaptured(){
        
        console.log("==【errorCaptured】=====");

    }

}
</script>

=[=V-if=]========================



=V-if实现状态切换==========================