Vue的生命周期

Vue生命周期

Vue的生命周期指的是一个vue实例从创建出来，到最后被销毁的全过程。
钩子函数
提到vue的生命周期就绕不开它啦
vue在生命周期的不同阶段，提供了对应的一些生命周期函数（即钩子函数），只要vue达到了相应的阶段，就会自动的调用响应的钩子函数。vue官网上介绍的钩子函数有11个，在这里，我只说一下常用的八大钩子函数。

八大生命周期函数(beforeXXX 和 XXXed)

• beforeCreate 数据注入vm实例之前, 此时vm还没有数据
• created 数据注入vm实例之后, 此时vm已经有数据了
• beforeMount 创建出来的结构, 替换视图之前
• mounted 创建出来的结构, 替换视图之后
• beforeUpdate 数据变化了, 更新视图之前
• updated 数据变化了, 更新视图之后
• beforeDestroy 实例销毁, 资源释放之前
• destroyed 实例销毁, 资源释放之后

敲黑板，注意点啊兄弟们：

1. 八大钩子函数, 钩子函数中的 this, 指向当前vm实例
2. beforeCreate中数据还没准备就绪, 太早了, 不适合操作数据

const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          list: []
        },
        beforeCreate () {
          console.log('beforeCreate  数据注入vm实例之前, 此时vm还没有数据')
          console.log(this.msg)
        },
        created () {
          console.log('created 数据注入vm实例之后, 此时vm已经有数据了')
          console.log(this.msg)
        },
        beforeMount () {
          console.log('beforeMount')
          console.log(document.querySelector('#app').innerHTML)
        },
        mounted () {
          console.log('mounted')
          console.log(document.querySelector('#app').innerHTML)
        },
        beforeUpdate () {
          console.log('beforeUpdate')
          console.log(document.querySelector('#app').innerHTML)
        },
        updated () {
          console.log('updated')
          console.log(document.querySelector('#app').innerHTML)
        },
        beforeDestroy () {
          console.log('beforeDestroy')
        },
        destroyed () {
          console.log('destroyed')
        }
      })