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

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页