目录

1、常用生命周期函数

1、beforeCreate

2、created

3、beforeMount

4、mounted

5、beforeDestroy,destroyed

6、beforeUpdate,updated

1、常用生命周期函数

生命周期函数就是vue实例在某一个时间点会自动执行的函数

当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤

Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，vue会自动的帮我去之行一个函数，这个函数就是beforeCreate

1、beforeCreate

beforeCreate：既然beforeCreate被自动之行，那么beforeCreate就是一个生命周期函数

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　}
})

我们发现这个在控制台被自动输出了，就是vue自动执行了beforeCreate这个函数，处理完这个函数，vue会继续调用一个写外部的注入，包括双向绑定的相关内容

Init(injections & reactivity): 外部的注射，各种绑定的初始化，这部分初始化完成的时候，基本上vue实例的初始化操作都完成了，在这个结点上，又会有一个自动的函数被执行,这个函数的名字叫created

2、created

created：这也是一个生命周期函数，因为他完全符合生命周期函数的定义

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　}
})

可以看到beforeCreate执行之后，created也被自动的执行了，继续看这张图

Has 'el' options:是否有el这个选项

Has 'template' optioins: 是否有template这个属性

　　no->Compile el's outerHtml as template: 如果实例里面没有tempalte这个属性，会把外部el挂载点的html当作模板

　　yes->Compile template into render functoin: 如果实例里面有tempalte，这个时候就会用template去渲染

但是有了模板之后并没有直接渲染到页面上，在渲染之前，又自动到去执行了一个函数，这个函数是beforeMount

3、beforeMount

beforeMount:这个函数也是一个生命周期函数，也就是模板即将挂载到页面到一瞬间，beforeMount会被执行

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log('before mount')
　　}
})

可以看到beforeMount被执行了，在beforeMount执行完成后

Create vm.$el and replace 'el' width it: 模板结合数据会被挂载到页面上，当dom挂载到页面之上，这个时候又有一个生命周期函数被执行了

4、mounted

mounted:在beforeMount dom并没有渲染到页面上，在mounted dom已经被渲染到页面上了,这个时候可以做个实验

<div id='app'>
　　hello world　　
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　template:'<h1>hello</h1>',
　　　　beforeCreate:function(){
　　　　　　console.log('before create')
　　　　},
　　　　created:function(){
　　　　　　console.log('created')
　　　　},
　　　　beforeMount:function(){
　　　　　　console.log(this.$el);
　　　　　　console.log('before mount')
　　　　},
　　　　mounted:function(){
　　　　　　console.log(this.$el);
　　　　　　console.log('mounted')
　　　　}
　　})
</script>

看到在beforeMount输出当dom是<div id='app'>hello world</div>，在mounted输出的dom是<h1>hello</h1>这也印证了上面这张图的内容，在beforeMount的时候页面还没有被渲染，在mounted的时候页面已经被渲染完毕了

5、beforeDestroy,destroyed

beforeDestroy,destroyed:

var vm = new Vue({
　　el:'#app',　　
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log(this.$el);
　　　　console.log('before mount')
　　},
　　mounted:function(){
　　　　console.log(this.$el);
　　　　console.log('mounted')
　　},
　　beforeDestroy:function(){
　　　　console.log('beforeDestroy')
　　},
　　destroyed:function(){
　　　　console.log('destroyed')
　　}
})

刷新页面完毕，这个时候会发现beforeDestroy,destroyed并没有被触发，那什么时候被触发呢

when vm.$destroy() is called:当destroy()这个方法被调用的时候会调用beforeDestroy，当全部销毁的时候，destroyed会被执行，那怎么让他执行呢，在控制台执行vm.$destroy()的时候会调用这两个函数，还没被销毁之前会调用beforeDestroy，已经被销毁后会调用destroyed这个函数

6、beforeUpdate,updated

beforeUpdate,updated:

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log(this.$el);
　　　　console.log('before mount')
　　},
　　mounted:function(){
　　　　console.log(this.$el);
　　　　console.log('mounted')
　 },
　　beforeDestroy:function(){
　　　　console.log('beforeDestroy')
　　},
　　destroyed:function(){
　　　　console.log('destroyed')
　　},
　　beforeUpdate:function(){
　　　　console.log('before updated')
　　},
　　updated:function(){
　　　　console.log('updated')
　　}
})

刷新页面看，发现这两个钩子函数其实并没有被执行，那为什么没有被执行呢，看图解释说是，when data changes，当数据发生改变的时候才会被执行

beforeUpdate：数据发生改变，还没有被渲染之前，beforeUpdate会被执行

updated:当数据重新渲染之后，updated这个生命周期函数会被执行

参考链接：

https://www.cnblogs.com/wzndkj/p/9612647.html

https://www.bilibili.com/video/BV1H7411j7Mc

生命周期是什么

生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作。

生命周期有哪些

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期，今天我们主要讲常使用的八个钩子函数

生命周期整体流程

接下来我们从以下三个阶段进行解读生命周期：

• 创建阶段
• 运行阶段
• 销毁阶段

1.创建阶段：

创建Vue的实例对象，初始化。这时候该对象只有默认的一些周期函数和默认事件，其他东西还未创建。

实例初始化阶段主要有两个函数：

• beforeCreate()
• created()

beforeCreate()

这里我们试着打印data中定义的msg和执行show方法。打开页面并查看控制台。

这里报错了，this.show is not a function，也就是不可使用，在beforeCreate 生命周期函数执行的时候，data和methods中的数据都没有初始化。

created()

接着我们执行遇到的第二个钩子函数created()。

同样，我们去查看页面和控制台。

在打印结果中，可以看到在created中，data和methods都已经被初始化好了。
如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作。

开始编译模板

接下来我们进到生命周期函数中的开始编译模板：

这里表示Vue开始编译模板，
把vue代码中的那些指令进行执行，最终在内存中生成个编译好的最终模板字符串然后把这个模板字符串，渲染成为内存中的DOM，此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。

挂载模板：

经过开始编译模板之后就进入了挂载模板，挂载阶段也分beforeMount和mounted两个钩子函数。

beforeMount()

这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成了
但是在尚未把模板渲染到页面中去，我们结合代码看，

这时候我们尝试把h3的内容渲染到页面中去，但是在页面和控制台中可以看到

这时候虽然在页面中可以显示“ok”字符了，但是在控制台中依然是{{ msg }}
也就是说，在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串。

mounted()

这是遇到的第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。
这时候在页面中可以显示“ok”字符了，而且在控制台中也渲染为“ok”字符串了
注意：mounted 是实例创建期间的最后一个生命周期函数，当执行完mounted 就表示 实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存中，一动不动。

我们的创建阶段的生命周期函数已经完成了，也就是图中的圆形部分。

2.运行阶段

接下来进入就是运行阶段，也就是下图部分：

运行阶段主要是两个钩子函数：

• beforeUpdate()
• updated()

首先我们先看运行阶段中这俩事件

①When data changes，意思是当data数据发生改变时
②beforeUpdate()该钩子函数会根据data数据的改变有选择性的触发0至多次

beforeUpdate()

为了更好的看到数据的改变，我们给msg数据进行监听，设置一个按钮，点击按钮时改变数据，将事先设好的“ok”改为“No”.

这时候表示 我们的界面还没有被更新
这时候我们需要思考一个问题：数据被更新了吗？
数据肯定被更新了。界面没有被更新而已，但是数据data已经更新了。
我们一起看看打印的结果把：

点击修改msg按钮后
得出结论：
当执行beforeUpdate的时候，页面中显示的数据还是旧的，
此时data数据是最新的，页面尚未和最新的数据保持同步

updated()

同样，我们在updated()钩子函数中执行上一步的操作

看看打印结果：

点击按钮后

这时候我们可以看到界面上元素的内容和data中msg的数据都是No
也就是说updated事件执行的时候，页面和data数据已经保持同步了，都是最新的。

经过上面两个钩子函数的操作，运行阶段的生命周期函数完成了：

最后就会进入到销毁阶段的生命周期函数：
同样的他们也有两个钩子函数：

• beforeDestory()
• destoryed()
  销毁阶段的钩子函数我们了解就好了。

beforeDestroy()

当执行beforeDestoy钩子函数的时候，Vue已经从运行阶段进入到了销毁阶段;
当执行beforeDestory的时候，实则身上所有的data和所有的methods，以及过滤器、指令等，都处于可用状态，此时还没有真正执行销毁的过程。

destroyed()

当执行到destoryed函数的时候，组件已经完全销毁了，此时，组件中所有的data、methods、指令、过滤器等，都已经不可用了。
完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
并不能清除DOM，仅仅销毁实例。

经过代码的辅助理解，我们再回头看看整个图的过程，应该会更加清晰了吧。

Vue生命周期函数理解并不难，也是和代码一样至上而下执行，一步步执行。
另外下面借鉴一位Up主：
xuxinwen32
给出的10个钩子函数的表格总结：

什么是Vue生命周期？

Vue的生命周期函数有哪些？在各个阶段做的事是什么？

四个周期八个函数

创建阶段：

beforeCreate(创建前)：

给实例化的Vue对象添加了属性和方法还有生命周期函数。

created(创建后)：

把methods和data添加到Vue实例化对象上，所以在created周期内可以访问data和methods中的数据，在这个阶段我们一般发送网络请求获取数据。

挂载阶段：

beforeMount(挂载前)：

在DOM挂载页面进行data数据'预'处理

mounted(挂载后)：

已经把DOM挂载到页面上了，是可以进行DOM元素操作的阶段了(可以理解为已经将虚拟DOM绘制到浏览器中------即为真实DOM)

更新阶段：

 beforeUpdate(更新前)：

updated(更新后)：

数据更新的DOM也已经产生在页面上了，可以继续访问

销毁阶段

beforeDestroy（销毁前）：

destroy(销毁后)：

组件缓存是什么？组件缓存有什么作用？组件缓存时出现的周期函数有哪些？

理解：

好处：

缓存阶段：

activated：

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

deactivated：

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

新增的生命周期函数

errorCaptured（2.5.0+ 新增）

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生

错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该错误继

续向上传播。