Vue学习-生命周期详解

一、生命周期图

生命周期图

二、生命周期函数

1、页面准备

页面准备

2、beforeCreate

beforeCreate() {
    //第一个生命周期函数,表示实例完全被创建出来之前,会执行它
    //在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有初始化
    console.log(this.msg)
    this.show()
  }

运行结果:
beforeCreate

3、created

created() {
    //第二个生命周期函数,在created中,data 和 methods都已经被初始化好了
    //如果要调用methods 中的方法 和 data 中的数据,最早 只能在created中操作
    console.log(this.msg)
    this.show()
  }

运行结果:
created

4、beforeMount

beforeMount() {
    //第三个生命周期函数,表示模板已经在内存中编译完成,但是尚未把模板渲染到页面中
    //在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
    console.log(document.getElementById('h1').innerText)
  }

运行结果:
beforeMount

5、mounted

 mounted() {
    //第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面,用户已经可以看到渲染好的页面了
    //mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,此时,
    //如果没有其他操作,这个实例不会被改变
    console.log(document.getElementById('h1').innerText)
  }

运行结果:
mounted

6、beforeUpdate

 beforeUpdate() {
    //此时页面还未更新,数据是否更新?数据已更新
    //结论:当执行beforeUpdate的时候,页面中显示的数据,还是旧的数据,此时data数据是最新的,但页面尚未和最新的数据保持同步
    console.log('页面上元素的内容:'+ document.getElementById('h1').innerText)
    console.log('data中的数据:'+ this.msg)
  }

运行结果:
beforeUpdate

7、updated

updated() {
    //updated事件执行的时候,页面和data数据已经保持同步,都是最新的
    console.log('页面上元素的内容:'+ document.getElementById('h1').innerText)
    console.log('data中的数据:'+ this.msg)
  }

运行结果:
updated

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值