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

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

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

vue的生命周期如图所示： 

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

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

注意：

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

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

生命周期运行示例：

  

    
{{ title }}
    

      -
      {{ count }}
      +
    
  

// 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，卸载后')
  }

卸载/销毁阶段在浏览器窗口被关闭时才会执行，但可以在console控制台，利用代码调用改阶段，测试使用。利用定义的vue示例去调用$destroy()方法，如下。

 

注意：在beforeDestroy中，还可调用data数据