vue中第一次页面加载会触发哪几个生命周期钩子函数,react生命周期的钩子函数

　　本文主要介绍vue的生命周期中有哪些钩子函数，什么时候触发？有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

vue生命周期钩子函数

　　vue的生命周期是一个组件从出生到死亡的完整周期。

　　主要包括以下4个阶段：创建，挂载，更新，销毁

　　Before: beforeCreate，after create:创建beforeMount，after mount:挂载beforeUpdate:更新前，更新后：beforeDestroy，destroy:destroy。我通常使用创建和安装的钩子。Created用来获取后台数据，mounted用来在dom挂载后做一些dom操作，以及初始化插件等。在Destroy用户清除定时器和取消绑定事件之前，等等。

　　此外，内置组件keep-alive被添加到缓存实例中，而不是频繁的创建和销毁(高成本)。

　　激活的实例激活去激活的实例失效

以下为详解版

　　大家理解就ok：

　　生命周期hook Functions (11) function (type)，蓝色标记的那个表示属于该类型。

　　在实例初始化之后，数据观察器和事件/观察器事件配置之前，调用Before函数。创建实例后，立即调用创建的函数。在这一步中，实例已经完成了以下配置：数据观察器、属性和方法的操作以及watch/event事件的回调。但是，挂载阶段还没有开始，$el属性目前是不可见的。在挂载开始之前调用BeforeMount函数：第一次调用相关的render函数。挂载的函数el被新创建的vm.el替换，钩子在挂载到实例后被调用。如果根实例挂载了一个文档内元素。调用mounted时，$el也在文档中。在更新beforeUpdate函数的数据时调用，这发生在修补虚拟DOM之前。适合在更新之前访问现有的DOM，比如手动删除添加的事件侦听器。在服务器端渲染过程中不会调用这个钩子，因为只有第一次渲染会在服务器端完成。更新函数由于数据变化，虚拟DOM被重新渲染和打补丁，之后钩子将被调用。当激活的功能保持活动组件被激活时调用。在服务器端呈现期间不调用此挂钩。当停用的函数keep-alive组件被停用时调用。在服务器端呈现期间不调用此挂钩。在销毁beforeDestroy函数的实例之前调用。在这一步，实例仍然完全可用。在服务器端呈现期间不调用此挂钩。在销毁函数Vue实例被销毁后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。在服务器端呈现期间不调用此挂钩。捕获的错误(2.5.0中的新功能)(err: error，VM: component，info: string)=？当Boolean捕获到来自后代组件的错误时，就会调用它。这个钩子接收三个参数：错误对象、发生错误的组件实例和包含错误来源信息的字符串。这个钩子可以返回false来防止错误向上传播。

生命周期mounted和activated使用、踩坑

activated

　　说到激活，就不得不提keep-alive。当你关掉它，把它切掉的时候，你就会呼叫它。(你可以理解为一个生命周期钩子函数，用法是一样的)

mounted

　　它指的是装入实例后的调用。如果没有keep-alive，组件每削减一次就会触发一次，但是keep-alive会缓存不活动的组件实例，那么可以说他只会触发一次。所以有些数据请求要在这里写一次，在激活的时候写一次，这样才能保证你游荡回来的时候还能请求新的数据。

踩坑

　　1.这里以一个关键字为例，意思是如果使用$refs，就要注意了。

　　2 .先执行mounted，第一次进入时两者一起执行。

　　附言

　　Keep-alive有很多用途。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。