VUE生命周期和生命周期四个阶段

Vue生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

vue的生命周期如图所示：

Vue 生命周期函数（钩子函数）：Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】（让开发者可以在【特定阶段】运行自己的代码）。

生命周期函数如下图所示：

注意：

（1）最早可以操作data数据或发送ajax请求的生命周期函数是created；

（2）最早可以操作dom元素的生命周期函数是mounted。

生命周期运行示例：

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>

// 1. 创建阶段（准备数据）
  beforeCreate () {
    console.log('beforeCreate 响应式数据准备好之前', this.count)
  },
  created () {
    console.log('created 响应式数据准备好之后', this.count)
    // this.数据名 = 请求回来的数据
    // 可以开始发送初始化渲染的请求了
  },},

// 2. 挂载阶段（渲染模板）
  beforeMount () {
    console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
  },
  mounted () {
    console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
    // 可以开始操作dom了
  },

// 3. 更新阶段(修改数据 → 更新视图)
  beforeUpdate () {
    console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
  },
  updated () {
    console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
  },

页面在进入后，不会执行更新阶段，只有点击+或-后，对页面有操作后，才会执行更新阶段

此为点击了+的更新函数结果

// 4. 卸载阶段
  beforeDestroy () {
    console.log('beforeDestroy, 卸载前')
    console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
  },
  destroyed () {
    console.log('destroyed，卸载后')
  }