我们知道vue是一个构建数据驱动的web界面的渐进式框架。
那vue的生命周期是什么呢？
vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。
先放一张官方文档的图
在这个图中我们可以清楚地看到 Vue 的整个生命周期和它所提供的钩子函数。
钩子函数
beforeCreate(创建前):此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
created(创建后):在这个阶段vue实例已经创建，但是页面还没有渲染出来.
beforeMount(载入前)：
在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；
mounted(载入后)：
mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
beforeUpdate(更新前)：
在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
update(更新后)：在这一阶段DOM会和更改过的内容同步。
beforeDestroy(销毁前)：在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操纵DOM时，就要销毁Vue,也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
destroyed(销毁后)：在销毁后，会触发destroyed钩子函数。
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue生命周期方法</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {},
methods: {
handle: function () {}
},
beforeCreate: function () {
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
//console.log(this.msg);
//this.say();
//console.log(this.say);
},
created: function () {
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
*/
//console.log(this.msg);
//this.say();
// console.log(this.say);
},
beforeMount: function () {
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
// console.log(document.querySelector("p").innerText);
// console.log(document.querySelector("p").innerHTML);
},
mounted: function () {
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeUpdate: function () {
/*主要data中的数据发生了变化就会执行
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
*
* */
// console.log(this.msg);
// console.log(document.querySelector("p").innerText);
// console.log(document.querySelector("p").innerHTML);
},
updated: function () {
/*主要data中的数据发生了变化就会执行
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
*
* */
console.log(this.msg);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeDestroy: function () {
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
* 最后能使用Vue实例的地址
* */
},
destroyed: function () {
/*
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
* */
}
})
</script>
</body>
</html>