vue 生命周期的详解

古城微笑少年丶 2023-06-02 07:58 3阅读 0赞

一.vue生命周期的解析

> 1>什么是vue生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。详细来说，就是Vue实例从开始创建，初始化数据，编译模板，挂在dom->渲染，更新->渲染，卸载等一系列过程，我们称这是vue的生命周期，各个阶段有相对应的事件钩子。

> 2>vue生命周期都有哪些，对应的钩子函数可以做什么\*\*

首先，Vue官网的生命周期的图很清楚明了的表明有哪些钩子函数，然后我们对应每个钩子函数详细讲解一下。  
  
![1323801-20190829180032627-2044214672.png][]

> （1）new Vue()

实例化vue对象

> （2）init events 和 init cycle

初始化事件和生命周期  
  
> （3）beforeCreate钩子函数

在实例初始化之后，this指向创建的实例，不能访问到data,computed,watch，methods上的方法和数据。此时，vue组件对象被创建，但是vue对象的属性还没有绑定，即没有值。也就是说，在beforeCreate函数，是在实例初始化之后，数据观测和event/watcher事件配置之前被调用。

beforeCreate() {
    console.log('创建前-挂在', this.$el)
    console.log('创建前-data', this.$data)
    },

打印结果：

![1323801-20190829180153508-1959325109.png][]

实践场景--常用于初始化非响应式变量

> （4）init injections & reactivity  
挂在数据（属性赋值），包括属性和computed的运算.在beforeCreated和created两个钩子函数之间发生。

![1323801-20190829180227219-1932469587.png][]  
打印结果：

![1323801-20190829180303891-934438477.png][]

通过打印结果，发现计算属性的值在beforeCreated钩子函数中拿不到，在created钩子函数中拿得到，说明计算属性是在beforeCreated和created这两个钩子函数之间进行处理赋值的。

> （5）created函数

实例创建完成，在created钩子函数这个时期，我们能够访问到data,computed,methods上的方法和数据，但是，这会还没有挂在dom。不能访问到$el，$ref属性内容未空数组。

created() {
    console.log('创建时--el', this.$el)
    console.log('创建时--data', this.message)
    console.log('创建时-computed', this.a)
    console.log('创建时--methods', this.onClick())
    }

结果：

![1323801-20190829180411736-1214105364.png][]

实战场景--常用于简单的axios请求，页面的初始化。

> （6）是否有el属性，和template属性

![1323801-20190829180452984-61583160.png][]

接下来判断对象上是否有el选项，如果有的话，就继续向下编译，如果没有el选项，就停止编译，也就意味着停止了生命周期。等到手动绑定调用vm.$mount()完成全局变量$el的绑定。  
如果对象有el选项之后，判断是否有template项，如果有template模板，则将其作为编译模板编译成render函数。如果没有template模板，则将外部的HTML作为模板编译，因此，可以看出，template中的模板优先级高于outer HTML 的优先级。如果有render函数，则会替换template  
因此：优先级关系：render>template>out html

> （7）beforeMount钩子函数

在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数。  
此时，this.$el上有值，但是数据还没挂载到页面上，即此时页面中的\{ \{\}\}还没有被替换掉。

beforeMount() {
    console.log('挂在之前调用', this.$el)
    },

打印结果：

![1323801-20190829180551942-1555822137.png][]

> （8）mounted钩子函数

实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问。

mounted () {
    console.log('挂在dom节点', this.$el)
    },

打印结果：

![1323801-20190829180650361-1187114195.png][]

> （9）beforeupdate钩子函数

响应式数据更新时调用，发生在虚拟DOM打补丁之前。  
组件更新之前执行的函数。  
数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前。

beforeUpdate() {
    console.log('组件更新前--数据', this.message)
    console.log('组件更新前--dom', this.$el.innerHTML)
    },

打印结果：

![1323801-20190829180810940-1922339979.png][]

实战场景：适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

> （10）updated钩子函数

虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作

updated() {
    console.log('组件更新时--数据', this.message)
    console.log('组件更新时--dom', this.$el.innerHTML)
    }

打印结果：

![1323801-20190829180855820-995377673.png][]

> -（11）beforeDestroy钩子函数

beforeDestroy() {
    console.log('实例销毁前', this.$el)
    },

实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例

打印结果：  
![1323801-20190829180917658-1239748372.png][]

> （12）destory钩子函数

实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

二.父子组件之间生命周期的执行顺序  
为了证明一下父子组件之间的生命周期，先看一下页面的渲染父子组件生命周期时如何进行的

![1323801-20190829180936586-1276453971.png][]

打印结果：

![1323801-20190829181019801-229379978.png][]

根据打印结果，我们能发现，首先走的是父组件的生命周期，在走完beforeMount之后，就子组件开始走生命周期，直接到子组件挂载dom节点之后，父组件在挂载dom节点。这样，页面渲染完毕。  
那么，当数据发生更新的时候，父子组件的beforeUpdate,update的顺序是怎么样的呢？

当当当，打印结果来了，一目了然：会先走父组件的beforeUpdate，然后走子组件的beforeUpdate, updated，只有等子组件更新完毕之后，父组件才会走updated。更新完毕

![1323801-20190829181037148-565475098.png][]

销毁的时候，父子组件的销毁顺序是怎样的呢？  
父组件会先走销毁前的钩子函数，然后子组件走销毁前，和销毁后的钩子函数，子组件销毁完毕之后，父组件在走销毁时的钩子函数。

![1323801-20190829181049076-1879809120.png][]

三.混入mixins的生命周期  
当组件生命周期与mixins混入的生命周期发生碰撞时，又会擦出什么样子的火花呢？

https://segmentfault.com/img/bVbwob8?w=1666&h=953  
打印结果：

![1323801-20190829181116345-1038954721.png][]

![1323801-20190829181140392-1329586208.png][]

通过打结果，我们不难发现，当mixins的生命周期与组件的生命周期碰撞的时候，\*\*会先走mixins的生命周期，在走组件的生命周期\*\*。

四.总结  
一直想写一篇关于生命周期的博客，来总结一下，自己在项目中遇见的问题，就是有时候 发现一些问题真的是因为生命周期的掌握不牢固而导致的，虽然已经解决，但是还希望自己能动手去在根据自己的小demo证实一下，生命周期的具体流程。在这里总结了一个vue实例在被创建前所经历的一系列的初始化的过程。vue从出生到死亡的整个过程。以及在父子组件中，生命周期是如何走的，还有混入的时候，混入的生命周期与组件的生命周期的执行顺序。可能还存在总结不足的地方，后续会继续优化的。

借鉴：在写这篇文章的时候，也借鉴了几篇其他人的博客，发现写的很好。给大家推荐一下。  
https://juejin.im/entry/5aee8fbb518825671952308c

https://blog.csdn.net/jiang7701037/article/details/83118665

https://segmentfault.com/a/1190000011381906

转载于:https://www.cnblogs.com/mn6364/p/10731778.html

[1323801-20190829180032627-2044214672.png]: /images/20230601/92112a3fc5334e248650bd822d01bc99.png
[1323801-20190829180153508-1959325109.png]: /images/20230601/7b28f983565c44939d9e55e7da856ba4.png
[1323801-20190829180227219-1932469587.png]: /images/20230601/fe002eff99bc42ad8e3e359770e9eb7d.png
[1323801-20190829180303891-934438477.png]: /images/20230601/ce71b58656874253a974a5a938d8a903.png
[1323801-20190829180411736-1214105364.png]: /images/20230601/2bd29a25c3054f5381436798d085a561.png
[1323801-20190829180452984-61583160.png]: /images/20230601/38882898c4284939985c1d14c14d5e1c.png
[1323801-20190829180551942-1555822137.png]: /images/20230601/8b480e9dcbb0447ea1a171f30ddaef31.png
[1323801-20190829180650361-1187114195.png]: /images/20230601/02e5f752f53a43e7bf3de735c8f2a525.png
[1323801-20190829180810940-1922339979.png]: /images/20230601/b783e3f1e0f54ae7b59a8200a63378d0.png
[1323801-20190829180855820-995377673.png]: /images/20230601/43da02bc131d49dfb5f91fb9a846a03c.png
[1323801-20190829180917658-1239748372.png]: /images/20230601/25255b27fe484509a1d7d9c5a12dcd08.png
[1323801-20190829180936586-1276453971.png]: /images/20230601/1c1cfe54889b42e1b61b66c226867df7.png
[1323801-20190829181019801-229379978.png]: /images/20230601/45df8867ce2a40e0b2dca67d8c77fe98.png
[1323801-20190829181037148-565475098.png]: /images/20230601/23cf50088bcd499099e4e1b76ca4d3fa.png
[1323801-20190829181049076-1879809120.png]: /images/20230601/963b9ffe8b474e23a2be4e8fbb6dbe25.png
[1323801-20190829181116345-1038954721.png]: /images/20230601/89565eb637f2479984355d07ca28bbcb.png
[1323801-20190829181140392-1329586208.png]: /images/20230601/10f73aaa57014bc185cc8861fdc0401e.png