vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，学习实例的生命周期，能帮助我们理解vue实例的运作机制，更好地利用各个钩子来完成业务代码。
先看官方的生命周期图示：
一眼看上去有点懵，没关系，我们分别来看看这几个阶段。
01
beforeCreate实例初始化之后调用beforeCreate，此时的数据观察和事件配置都没好准备好。我们打印一下实例的数据data和挂载元素el。
代码如下:
<div id="app">{{name}}</div><script> let app = new Vue({ el: "#app", data: { name: "前端麻辣烫" }, beforeCreate () { console.log("即将创建") console.log("$data: " + this.$data) console.log("$el: " + this.$el) } });</script>结果如下：
此时的实例中的data和el还是undefined,不可用的。
02
created在实例创建完成后立即调用created，我们同样打印一下数据data和挂载元素el。
在上一段代码的基础上，增加以下代码：
created () { console.log('创建完毕') console.log("$data: " + this.$data) console.log("$el: " + this.$el)}结果如下：
此时，我们能读取到数据data的值，但是dom还没生成，所以属性el还不存在，输出$data为一个Object对象，而$el的值为undefined。
03
beforeMount在挂载开始之前被调用,上一个阶段我们知道dom还没生成，属性el还为undefined，那么，此阶段为即将挂载，我们打印一下此时的$el是什么？
增加以下代码：
beforeMount () { console.log('即将挂载') console.log(this.$el)}结果如下：：
此时的$el不再是undefined，而是成功关联到我们指定的dom节点<div id=”app”></div>，但此时{{ name }}还没有被成功地渲染成我们data中的数据。
04
mounted挂载完毕后调用mounted，到了这个阶段，数据就会被成功渲染出来，打印$el 看看：
增加以下代码：
mounted () { console.log('挂载完毕') console.log(this.$el)}结果如下：
此时打印属性el，我们看到{{ name }}已经成功渲染成我们data.name的值：“前端麻辣烫”。
05
beforeUpdate我们知道，当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
html片段代码我们加上ref属性，用于获取dom元素。
<div id="app" ref="app">{{name}}</div>Vue实例代码加上beforeUpdate钩子代码：
beforeUpdate(){ console.log('=即将更新渲染=') console.log("$data.name: " + this.$data.name) console.log('$refs.app.innerHTML: '+this.$refs.app.innerHTML)}我们在控制台修改实例的name值，打印name值和视图中文本的innerHTML，结果如下：
我们在控制台把app.name的值从原来的 “前端麻辣烫” 修改成 “new name”，我们看到虽然app.name已经变成了“new name”，但视图上的值，依然为原来的“前端麻辣烫”，表明在此阶段，视图并未重新渲染更新。
06
updated在更新渲染视图之后调用updated,此时再读取视图上的内容，已经是最新的内容。接着上面的案例，我们添加钩子updated的代码，如下：
updated(){ console.log('==更新成功=='); console.log("$data.name: " + this.$data.name) console.log('$refs.app.innerHTML: '+this.$refs.app.innerHTML)}结果如下：
此时app.name和视图上的值已经是最新的值：“new name，说明此刻视图已经更新了。
07
beforeDestroy调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。
08
destroyed成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
我们在销毁后通过控制台修改实例的name看看情况。
beforeDestroy () { console.log('销毁之前')},destroyed () { console.log('销毁成功')}结果如下：
调用实例的$destroy( )方法销毁之后，实例与视图的关系解绑，再修改name的值，视图再也不会更新了，说明实例成功被销毁了。
09
activatedkeep-alive组件被激活时调用。
10
deactivatedkeep-alive 组件停用时调用。
html片段代码：
<div id="app"> <keep-alive> <com1 v-if="show"></com1> </keep-alive></div>vue实例代码：
let app = new Vue({ el: "#app", data: { show: false }, components: { "com1": { template: `<p>前端麻辣烫</p>`, activated () { console.log("组件被激活") }, deactivated () { console.log("组件被停用") } } }});结果如下：
到此10个常见的钩子函数就已经总结完了，最后附上完整代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue生命周期</title></head><body> <div id="app" ref="app"> {{name}} <keep-alive> <com1 v-if="show"></com1> </keep-alive> </div></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript"> let app = new Vue({ el: "#app", data: { name: "前端麻辣烫", show: false }, components: { "com1": { template: `<p>前端麻辣烫</p>`, activated () { console.log("组件被激活") }, deactivated () { console.log("组件被停用") } } }, beforeCreate () { console.log("即将创建") console.log("$data: " + this.$data) console.log("$el: " + this.$el) }, created () { console.log('创建完毕') console.log("$data: " + this.$data) console.log("$el: " + this.$el) }, beforeMount () { console.log('即将挂载') console.log(this.$el) }, mounted () { console.log('挂载完毕') console.log(this.$el) }, beforeUpdate(){ console.log('即将更新渲染') console.log("$data.name: " + this.$data.name) console.log('$refs.app.innerHTML: '+this.$refs.app.innerHTML) }, updated(){ console.log('更新成功'); console.log("$data.name: " + this.$data.name) console.log('$refs.app.innerHTML: '+this.$refs.app.innerHTML) } });</script></html>beforeCreate()
在实例初始化之后调用，数据观察和事件配置都没好准备好。
created()
在实例创建完成后被调用，实例已完成数据观测 (data observer) 和 event/watcher 事件的配置，但是挂载元素还未生成。
beforeMount()
在挂载开始之前被调用，挂载元素已成功关联到指定的dom节点，还没有渲染data中的数据。
mounted()
挂在完毕之后调用，数据被渲染出来。
beforeUpdate()
数据更新前调用，此时视图里还是更新前的数据。
updated()
数据更新后调用，此时视图里是更新后的数据。
beforeDestroy()
在开始销毁实例时调用。
destroyed()
在实例销毁后调用，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
actived()
在keep-alive组件被激活前中调用。
deactived()
在keep-alive组件被停用后调用。
扫描二维码，可以撩好（chun）看（meng）的小编~🐶
