VUE生命周期详解

第一章 VUE 生命周期

提示：学会VUE生命周期，就能够得心应手的控制你的页面！简直不要太棒了！！

---

---

前言

本章节主要讲述VUE生命周期的整个历程，这很重要，只有了解了整个生命周期，在写代码的时候才会清楚的知道什么时候该触发什么事件，逻辑才会更加的清晰。

---

一、什么是VUE的生命周期？

vue实例创建到销毁的整个过程就是vue的生命周期。vue的所有功能的实现都是围绕它的整个生命周期进行的，在生命周期内的不同阶段调用对应的钩子函数，进而实现组件数据管理和DOM渲染两大重要功能

二、生命周期钩子函数

生命周期函数钩子如下：

• beforeCreate
• created
• beforeMount
• monuted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

这些生命周期钩子函数，会在下面的生命周期历程中详细说明它的使用场景

三、生命周期历程

• 从vue实例创建开始生命周期就诞生了，从创建到消亡整个生命周期历程中，它会依次经历以下几件人生大事：

1. 实例对象创建
2. 实例初始化
3. 模板编译
4. 虚拟DOM挂载
5. 监听数据改变
6. 销毁

• 生命周期走到每个阶段的每个节点时，会对应的调用执行生命周期的钩子函数，调用执行完毕后，继续进行下一个生命阶段，直至最终销毁，整个生命周期也就结束了

• 生命周期历程总的大致分为三个阶段：创建阶段、运行阶段、销毁阶段。下面对各阶段进行详细说明
  （下面的说明，从头到脚依次仔细读，我相信vue的生命周期就能够很好的理解了！！）

1.创建阶段

当我们new一个vue实例对象时，就立马进入了创建阶段，之后会立即初步初始化该实例对象（注意此次初始化完成后，该实例对象仅仅只是拥有了一些默认的生命周期钩子函数和默认的事件，data和methods都还没有被初始化） 代码如下（示例）：

<!-- DOM -->
<div id="app">
    <h2 id="h2">{{msg}}</h2>
    <button @click="msg='no'">修改data</button>
</div>

//vue实例对象
var vm = new Vue({
	el: 'app',
	data () {
		return {
			msg: 'ok'
		}
	},
	methods： {
		show () {
			console.log('执行了show方法')
		}
	},
	beforeCreate() {},
	Created() {},
	beforeMount() {},
	monuted() {},
	beforeUpdate() {},
	update() {},
	beforeDestory() {},
	destroyed() {}
})

在此节点，完成vue实例对象初步初始化后，会进入到生命周期的第一个钩子函数beforeCreate，此时可以在这个函数钩子里面实现自己的一些合理的代码逻辑处理 代码如下（示例）：

beforeCreate () {
    // 这是我们遇到的一个生命周期函数，表示实例完全被创建出来之前，会执行此函数钩子
    console.log(this.msg) // 控制台输出：undefine        !!!!!并不会输出ok
    this.show() // 控制台会报错，this.show is not a function
    // 注意！！！在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化！！！
}

执行完成钩子函数beforeCreate，会去初始化数据和方法（即初始化data和methods），data和methods全部初始化完成过后，执行下一个生命周期函数created 代码如下（示例）：

created () {
    // 这是我们遇到的第二个生命周期函数，此时data和methods都已经被初始化好了！！！
    console.log(this.msg) // 控制台输出：ok
    this.show() // 控制台输出：执行了show方法
    // 注意！！！！！：如果要调用methods中的方法，或者操作data中的数据
    // 这是最早能拿到实例里面的数据和方法的一个钩子函数
  }

执行完成钩子函数created后，下一步就是进行模板的编译了，判断有无el、template属性，进而执行对应的vue代码指令，形成模板字符串，之后将模板字符串渲染为内存中的虚拟DOM树，保留在内存中，下一步则是去执行下一个生命周期钩子函数beforeMount（注意：此节点只是完成了在内存中渲染虚拟DOM树，并未真正的把模板挂载到页面中） 代码如下（示例）：

beforeMount () {
    //这是我们遇到的第三个生命周期函数,表示模板在内存中已经编辑完成了，但是尚未把模板挂载渲染到页面中
    console.log(document.getElementById('h2').innerText) // 控制台输出：{{msg}}
    // （innerText为DOM中标签为<h2 id="h2">{{msg}}</h2>的内容{{msg}}）
    // beforeMount执行的时候，DOM元素没有被真正替换，输出还是之前的模板字符串{{msg}}，不是msg初值ok
}

执行完成钩子函数beforeMount后，接下来就是将内存中编译好的虚拟DOM挂载渲染到真实页面上去，挂载完成后，会执行下一个钩子函数mounted 代码如下（示例）：

mounted () {
    // 这是遇到的第四个生命周期函数
    // 此时内存中的模板已经真实的挂载到了页面中，用户已经能够看到渲染好的页面了
    // 所以要通过某些插件操作页面上的DOM节点，最早就在这里执行
    console.log(document.getElementById('h2').innerText) // 控制台输出：ok
    // 注意！！！！！！：mounted是实例创建期间的最后一个生命周期函数
    // 执行完了mounted函数，标志vue实例创建完毕，组件脱离创建阶段，接下来就进入运行阶段
}

执行完成钩子函数mounted后，则标志着vue实例对象创建阶段完毕了

2.运行阶段

当我们页面有数据修改时，则会立即进入运行阶段，此阶段一共有两个生命周期函数beforeUpdate和updated，这两个函数会根据data数据的改变，有选择性的触发0次到多次 现在我们假设点击了DOM中的button按钮，将数据msg修改为了no，这时则处于生命周期的运行阶段了，data中的msg已经完成了从ok变为no的修改（此时数据是最新的，但是真实页面不是最新的，它并未更新），之后会进入下一个生命周期函数beforeUpdate

代码如下（示例）：

beforeUpdate () {
    // 这是我们遇到的第五个生命周期函数
    // 此时界面还没有被刷新【但是数据肯定被更新了】
    console.log('界面上的元素内容：' + document.getElementById('h2').innerText) // 控制台输出：ok
    console.log('data中的msg数据：' + this.msg) // 控制台输出：no
    // 结论：执行beforeUpdate,此时页面中显示的数据未与新data保持同步，页面未刷新
}

beforeCreate执行完成过后，会根据data中的最新数据，首先会在内存中更新虚拟DOM树，当最新的虚拟DOM树被更新完成后，则重新将内存中已经更新好的虚拟DOM树渲染到真实页面中去，真实页面重新渲染完毕后立即进入下一个生命周期函数updated，此时页面和data保持同步，都是最新的

代码如下（示例）：

updated () {
    // 这是我们遇到的第六个生命周期函数
    // 在执行updated函数时，页面和data已经保持同步了，都是最新的
}

updated钩子函数执行完毕后，运行阶段结束（再次提醒：运行阶段中的两个函数会根据data数据的改变，有选择性的触发0次到多次）

3.销毁阶段

当页面关闭或者离开组件时，会进入到销毁阶段，这个阶段一共有beforeDestroy和destroyed两个生命周期函数 假设现在关闭了页面或者离开了某组件，则会立即进入下一个函数钩子beforeDestroy，执行此函数时，实例上的所有data、methods、filters（过滤器）、指令等等，都是处于可用状态的

代码如下（示例）：

beforeDestroy () {}

beforeDestroy执行完毕后，继续执行下一个钩子函数destroyed，此时组件已经被完全销毁了，所有的data、methods、过滤器、指令都不可用

代码如下（示例）：

destroyed () {}

当destroyed函数执行完毕后，就标志着销毁阶段结束，至此整个vue生命周期也就结束啦

---

总结

相信仔细看了这篇文章，对vue生命周期的理解不在话下