Vue学习-生命周期详解

一、生命周期图

二、生命周期函数

1、页面准备

2、beforeCreate

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

运行结果：

3、created

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

运行结果：

4、beforeMount

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

运行结果：

5、mounted

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

运行结果：

6、beforeUpdate

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

运行结果：

7、updated

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

运行结果：