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

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

 

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