在Vue官网上一篇讲到了Vue实例以及它的生命周期，这里我将实例生命周期的图截了下来如下：

我们可以看到在Vue实例的整个生命周期中，会有八个生命周期钩子函数提供给我们，方便我们在不同时期进行不同操作，八个钩子函数如下：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

先一起来看看下面代码的打印结果：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app">{{title}}</div><script type="text/javascript">var vm = new Vue({el:'#app',data:{title:"第一个例子"},beforeCreate(){console.log("beforeCreate $el",this.$el) /*beforeCreate $el undefined*/console.log("beforeCreate $data",this.$data) /*beforeCreate $data undefined*/console.log("beforeCreate title",this.title) /*beforeCreate title undefined*/},created(){console.log("created $el",this.$el) /* created $el undefined */console.log("created $data",this.$data) /* created $data {__ob__: Observer} */console.log("created title",this.title)  /* created title 第一个例子 */},beforeMount(){console.log("beforeMount $el",this.$el) /* beforeMount $el <div id="app">{{title}}</div> */console.log("beforeMount $data",this.$data)/* beforeMount $data {__ob__: Observer} */console.log("beforeMount title",this.title) /* beforeMount title 第一个例子 */},mounted(){console.log("mounted $el",this.$el) /* mounted $el <div id="app">第一个例子</div> */console.log("mounted $data",this.$data) /* mounted $data {__ob__: Observer} */console.log("mounted title",this.title) /* mounted title 第一个例子 */},beforeUpdate() {console.log("beforeUpdate $el",this.$el.innerHTML)console.log("beforeUpdate $data",this.$data)console.log("beforeUpdate title",this.title)},updated() {console.log("updated $el",this.$el.innerHtml)console.log("updated $data",this.$data)console.log("updated title",this.title)},beforeDestroy(){console.log("beforeDestroy $el",this.$el)console.log("beforeDestroy $data",this.$data)console.log("beforeDestroy title",this.title)},destroyed() {console.log("destroyed $el",this.$el)console.log("destroyed $data",this.$data)console.log("destroyed title",this.title)}})</script></body>
</html>

打印结果如下：

1. 在beforeCreate之前

进行了以下操作：（对于浏览器来说整个渲染还没开始或者说准备开始， el 和 data 并未初始化，代码中均打印的是undefined）

    处理该实例的初始化选项：vm.$options初始化生命周期：initLifecycle初始化事件：initEvents初始化render函数：initRender

beforeCreate()在这个函数中无法访问el、data、method，因为还未初始化。

2. beforeCreate和created之间

在这个期间对事件初始化、对数据进行观测。通过代码的打印结果我们可以看到，这期间data完成初始化，而el还不存在。所以我们对data进行赋值等其他操作时、或者调用method中的方法，最早只能在created()钩子函数中！

3. created和beforeMount之间

根据流程图，我们可以看到，先判断vm实例中是否有el选项？

    如果有：再判断是否有template选项；如果没有：停止编译（停止生命周期），直到调用vm.$mount(el)函数；

我们可以再之前的代码上注释掉：

el:'#app',

这一行，看到控制台打印结果如下：生命周期在created之后就停止了，不往下执行！

我们在代码中加上一行：

vm.$mount("#app")

打印结果如下：生命周期正常执行

以上是判断是否存在el部分；如果存在el继续判断Vue实例中是否存在template选项：

    如果有：将template作为模板编译成render函数； 如果没有：将外部HTML作为模板编译；（上面的代码例子中就未给出template属性）

模板已经在内存中编译好，但是未挂载到页面中！

通过代码打印我们可以看到，这个期间我们的el不再不存在，而是关联到了我们指定的DOM上（打印出：< div id=“app”>{{title}}）。

4. beforeMount和mounted之间

在这个期间，Vue实例在内存中创建了一个vm. e l ，然后原本的 e l 被新创建的 v m . el，然后原本的el 被新创建的 vm. el，然后原本的el被新创建的vm.el 替换，其实就是将内存中编译好的模板替换到页面上，之后调用mounted钩子函数，所以我们在mounted函数中打印出来的el是：< div id=“app”>第一个例子页面上的内容也随之发生了变化！

显然，如果我们要对页面上的DOM进行操作时，最早只能在mounted()钩子函数中进行。

当mounted()运行完后，整个实例的初始化阶段结束，下面进入运行阶段。

5. beforeUpdate钩子函数和updated钩子函数间的生命周期

当我们Vue实例中的data数据发生变化时就会触发这两个钩子函数，如下：我们在控制台输入vm.title="121"来更改data数据，可以看到，在beforeUpdate时data中的数据已经修改为了”121“（如果数据不改变，根本就不会触发这两个钩子函数！！），但是我们的DOM中并未更新，而在updated时DOM已经更新了，页面中已经显示为了”121“。

6. beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用，这时，实例仍然完全可用。 destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。我们使用vm.$destroy来销毁实例如下：

但是页面中的相应DOM并没有变化，想要清除页面的 DOM，需要使用 v-if="false"来手动销毁实例 !

详情可以参考官方文档: 官方文档

vue生命周期（超详解！）相关推荐

超详细vue生命周期解析(详解)
vue是每一个前端开发人员都绕不过的一个技术,在国内的市场占有量也是非常的大,我们大部分人用着vue, 却不知道他内部其实经历了一些什么.每个生命周期又是什么时候开始执行的.我们今天来详细的看一看首 ...
vue生命周期的详解
vue生命周期: 1. 创建阶段:beforeCreate():created() 2. 挂载阶段:beforeMount():mounted() 3. 更新阶段:beforeUpdate():upd ...
vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
vue 生命周期（详解）
前言首先我们要搞明白生命周期到底是什么? 顾名思义,生命周期就是我们从开始创建vue实例到销毁的一个过程,这一过程就叫做生命周期,这就好比我们的人生一样从出生到结束的一个过程. 切记,生命周期函数不 ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
Android Lifecycle 生命周期组件详解
转载请标明出处:https://blog.csdn.net/zhaoyanjun6/article/details/99695779 本文出自[赵彦军的博客] 一.Lifecycle简介为什么要引进 ...
Vue的生命周期的详解
Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录. Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的 ...
Asp.Net生命周期的详解
一．Asp.Net页面生命周期的概念当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 TTP页面处理程 ...
android 屏幕横竖屏切换时生命周期运行详解，创建横屏layout，has no declaration in the base
横屏代码 1.配置文件设置 android:screenOrientation="landscape" 2.java代码设置 setRequestedOrientation(Act ...
Asp.Net WebForm生命周期的详解
一．http://Asp.Net页面生命周期的概念当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 T ...

vue生命周期（超详解！）