Vue的生命周期

在这里插入图片描述

# Vue生命周期总结
		【1.初始化阶段】
		beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例【仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性】
            console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经【初始化了data属性和methods中相关方法】
            console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将【El中指定作用范围作为模板编译】,如还没解析{{}}
            console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,【已经将数据渲染到界面中并且已经更新页面】,如已经解析了{{}}中获取的值
            console.log("Mounted: "+document.getElementById("sp").innerText);
        }2.运行阶段】
		beforeUpdate(){//5.生命周期中第五个函数,该函数是【data中数据发生变化时】执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的【依然是原始数据】
            console.log("beforeUpdate:"+this.msg);
            console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  【页面中数据已经和data中数据一致】
            console.log("updated:"+this.msg);
            console.log("updated:"+document.getElementById("sp").innerText);
        },3.销毁阶段】
		beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中【所有数据 methods componet 都没销毁】
        },
        destoryed(){ //8.生命周期的第八个函数,该函数执行时,【Vue实例彻底销毁】
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值