vue实例的生命周期-CFANZ编程社区

什么是生命周期：从Vue实例创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子： 就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件

主要的生命周期函数分类：
1. 创建期间的生命周期函数：

beforeCreate: 实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性

   var vm = new Vue({
     el: '#app',
     data: {
       msg: 'ok'
     },
     methods: {
       show() {
         console.log('执行了show方法')
       }
     },
     beforeCreate() { //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
       console.log(this.msg) //undefined
       this.show() //this.show is not a function
       //注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
     }
   })

created: 实例已经在内存中创建OK，此时data和methods已经创建OK，此时还没有开始编译模板

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

beforeMount: 此时已经完成了模板的编译，但是还没有挂载到页面中

  <body>
    <div id="app">
      <h3 id="h3">{{ msg }}</h3>
   </div>
  </body>

   var vm = new Vue({
     el: '#app',
     data: {
       msg: 'ok'
     },
     methods: {
       show() {
         console.log('执行了show方法')
       }
      },
      beforeMount() { //这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
        console.log(document.getElementById('h3').innerText) //{{ msg }}
        // 在beforeMounte 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      }
    })

mounted: 此时，已经将编译好的模板，挂载到了页面指定的容器中显示

  mounted() { //这是遇到的第4个生命周期函数，表示，内存中的模板,
    //已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
    console.log(document.getElementById('h3').innerText) //ok
    //注意：mounted是实例创建期间的最后一个生命周期函数
    //当执行完mounted就表示实例已经被完全创建好了，此时，如果没有其他操作的话
    //这个实例就静静的躺在我们的内存中，一动不动
  }

运行期间的生命周期函数：

beforeUpdate: 状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

   <body>
    <div id="app">
      <input type="button" value="修改msg" @click="msg='NO'">
      <h3 id="h3">{{ msg }}</h3>
   </div>
  </body>
  beforeUpdate() { //这时候，表示我们的界面还没有被更新 
   //【数据被更新了吗? 数据肯定更新了】
   //如果点击修改msg按钮
   console.log('界面上元素的内容：' + document.getElementById('h3').innerText) 
   //界面上元素的内容：ok
   console.log('data中的msg数据是：' + this.msg) //data中的msg数据是：NO
   //得出结论：当执行beforeUpdate 的时候，页面中的显示的数据，还是旧的，
   //此时data数据是最新的，页面尚未和最新的数据保持同步
  }

updated: 实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

  updated() {
    //如果点击修改msg按钮
    console.log('界面上元素的内容：' + document.getElementById('h3').innerText) 
     //界面上元素的内容：NO
     console.log('data中的msg数据是：' + this.msg) //data中的msg数据是：NO
     // updated 事件执行的时候，页面和data数据以已经保持同步了，都是最新的
  }