vue生命周期钩子函数(详解及使用场景),3.vue生命周期钩子函数有哪些?
本文主要介绍钩子在vue组件生命周期中的使用实例的详细说明。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
组件生命周期图组件生命周期挂钩1，创建前2，创建前3，安装前4，安装前5，更新前6，更新后7，激活后8，停用后9，销毁前10，销毁后11，错误捕获
组件生命周期图
组件生命周期钩子
的所有生命周期挂钩都会自动绑定。
一、组件的生命周期：一个组件从创建到销毁的全过程。
二、生命周期钩子：在一个组件的生命周期中，会有很多特殊的时间节点，在特定的时间节点往往会完成一定的逻辑，可以用钩子绑定特殊的事件节点。
注意：Hook-预先为一个事件绑定一个方法，当这个事件的激活条件满足时，这个方法就会被调用满足特征条件的绑定方法，叫做Hook。
模板
div class="货物"
导航/
/div
/模板
脚本
导入导航自./components/Nav ；
导出默认值{
名称：货物，
组件：{
导航，
},
创建之前(){
Console.log(将加载此组件)
},
已创建(){
Console.log(将成功加载此组件)
},
已更新(){
Console.log(“数据更新”)
},
销毁(){
Console.log(此组件已销毁)
}
}
/脚本
1、beforeCreate
在实例初始化之后，数据观察器和事件/观察器事件配置在之前被调用。
2、created
在创建实例后会立即调用它。在这一步中，实例已经完成了以下配置：数据观察器、属性和方法的操作以及监视/事件事件的回调。但是，挂载阶段还没有开始，$el属性还不可用。
3、beforeMount
在装载开始前调用。
4、mounted
当el被新创建的vm替换时，在装载实例后调用。$el。如果根实例安装在文档中的元素上。调用mounted时，$el也在文档中。
请注意，mounted并不保证所有子组件都会一起安装。如果你想等到整个视图被渲染，你可以使用vm。$nextTick内部安装：
已安装：函数(){
这个。$nextTick(function () {
//仅在
//整个视图都已呈现
})
}
5、beforeUpdate
当数据更新时调用，这发生在修补虚拟DOM之前。适合在更新之前访问现有的DOM，比如手动删除添加的事件侦听器。
在服务器端渲染过程中不会调用这个钩子，因为只有第一次渲染会在服务器端完成。
6、updated
由于数据变化，虚拟DOM被重新渲染和修补，之后钩子将被调用。
当这个钩子被调用时，组件DOM已经被更新，所以现在可以执行依赖于DOM的操作了。
但是，在大多数情况下，您应该避免在此期间更改状态。如果状态相应地改变，通常最好使用计算属性或观察器。
7、activated
当激活由keep-alive缓存的组件时调用。
在服务器端呈现期间不调用此挂钩。
8、deactivated
当keep-alive缓存的组件被停用时调用。
在服务器端呈现期间不调用此挂钩。
9、beforeDestroy
在实例被销毁之前调用。在这一步，实例仍然完全可用。
在服务器端呈现期间不调用此挂钩。
10、destroyed
在实例被销毁后调用。钩子被调用后，对应于Vue实例的所有指令都被解除绑定，所有事件侦听器被移除，所有子实例被销毁。
在服务器端呈现期间不调用此挂钩。
11、errorCaptured
2.5.0新增
当捕获到子代组件的错误时调用。这个钩子接收三个参数：错误对象、发生错误的组件实例和包含错误来源信息的字符串。
这个钩子可以返回false来防止错误向上传播。
以上是vue组件生命周期钩子使用实例的详细内容。更多关于vue组件生命周期钩子的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。