3.vue生命周期钩子函数有哪些?,vue生命钩子函数
生命周期钩子也叫生命周期时间，生命周期函数，生命周期钩子就是vue生命周期中的各种事件。这些事件被称为生命周期挂钩。下面这篇文章主要介绍关于Vue生命周期钩子的相关信息，有需要的朋友可以参考一下。
目录
前言生命周期钩子选项API(Options API)生命周期流程图运行生命周期钩子创建前()创建前()挂载前()挂载前()更新前()卸载前()卸载前()组合API中的生命周期钩子setup()替换了Created()和beforeCreated()钩子，可以和setup()一起使用总结。
前言
像其他框架一样，Vue有许多生命周期挂钩，允许将代码附加到创建或使用Vue应用程序时发生的特定事件上，例如加载组件时、将组件添加到DOM时或删除某些内容时。
Vue有很多生命周期挂钩。令人困惑的是每个钩子的意义或功能。在本指南中，我们将介绍每个生命周期挂钩的作用以及如何使用它们。
生命周期钩子
Vue在生命周期挂钩中有两个范例。一个是Vue3中引入的composition API，另一个是Vue2中的options API，这是定义Vue组件的原型模式。在本指南中，我们将从API(Options API)开始，然后展示Composition API的工作原理。
选项式API（Options API）
API(Options API是Vue2的范例，如下面的代码所示：
导出默认值{
名称：开发点，
data() {
返回{
电话号码： 13566666666 ，
};
},
已安装(){}，
};
生命周期流程图
为了了解每个生命周期挂钩的触发时间，下图描述了每个生命周期挂钩的触发时间。
运行生命周期挂钩
要使用Options API运行任何生命周期挂钩，可以将其添加到Javascript原型中。例如，如果您使用beforeCreate()，即检测到新组件后触发的第一个挂钩，您可以像这样添加它：
导出默认值{
名称：开发点，
data() {
返回{
一些数据：“20220609”，
};
},
已安装(){}，
};
不同钩子的时机已经在上面显示过了。接下来我们来介绍一下每个钩子都做了什么，在什么情况下会触发。
beforeCreate()
当组件初始化时调用，此时data()和computed属性不可用。这对于调用不操作组件数据的API非常有用。如果在这个钩子中更新了data()，那么一旦加载了options API，更新将会丢失并失效。
created()
在实例处理完所有状态操作后调用，它可以访问响应数据、计算属性、方法和监视。$el是Vue的存储组件HTML的一个变量，这个变量在这个钩子中还不可用，因为此时还没有创建DOM元素。如果需要触发API等不操作DOM元素或者更新数据()的操作，可以在这里进行。
beforeMount()
这个钩子将在渲染发生之前执行。模板已经编译好了，所以存储在内存中，但是还没有附加到页面上，也没有创建DOM元素，所以$el在这个阶段还不可用。
mounted()
组件已经安装并显示在页面上，$el可以正常使用。在这个阶段，可以从Vue访问和操作DOM。这只有在所有子组件安装完成后才会被触发。当您希望在DOM加载后对其执行某些操作(比如可能更改其中的某些元素)时，使用DOM非常有用。
beforeUpdate()
有时，Vue组件中的数据会因更新watch中的数据或用户交互而改变。当data()被更改或组件被重新呈现时，将触发更新事件。在DOM重新呈现发生之前，beforeUpdate()将被立即触发。此事件之后，组件将被重新呈现，并使用最新数据进行更新。您可以使用这个钩子来访问DOM的当前状态，甚至更新数据()。
updated()
在更新被触发，并且DOM已经用最新的数据更新和重新呈现之后，updated()将被触发。这在重新渲染后会立即发生。现在，如果您访问$el DOM内容或关于DOM内容的任何其他内容，它将显示新的、重新呈现的版本。如果有父组件，updated()首先调用子组件，然后调用父updated()钩子。
beforeUnmount()
如果组件被删除，那么它将被卸载。在组件被完全删除之前，beforeUnmount()触发。该事件仍然可以访问DOM元素和任何其他与组件相关的内容。这在删除事件中很有用，例如，您可以使用该事件通知服务器用户已经删除了表中的一个节点。如果你需要使用它们，你仍然可以访问这个。$el，以及data()，方法和watch。
unmount()
一旦完全删除，将触发unmount()事件。这可用于清理其他数据或事件侦听器或计时器，以告知该组件不再存在于页面上。如果你需要使用它们，你仍然可以访问这个。$el，以及data()，方法和watch。
组合式API（Composition API）中的生命周期钩子
如果你习惯使用API(Options API，上面的钩子就有意义了。如果主要使用Vue 3，需要习惯作曲API的风格。API(Composition API是options API的补充，但是钩子的使用方式略有不同。
setup() 替换 created() 和 beforeCreated()
在组合API中，created()和beforeCreated()是不可访问的。替换为setup()，created()和beforeCreated()中实现的逻辑可以完全迁移到setup()。
钩子可以与 setup() 一起使用
挂钩可以与setup()一起使用，如下所示：
导出默认值{
名称：开发点，
data() {
返回{
一些数据：“20220609”，
};
},
setup() {
console . log( setup )；
},
已安装(){
console.log(这个。$ El)；
},
};
但是，您可能会看到，另一种方法是使用组合API函数在setup()函数中定义挂钩。如果您需要这样做，挂钩的名称会略有不同：
之前()已更改为onbeforemount()已装载()已更改为onbeforemount()已更改为onbeforemount()已更新()已更改为onBeforeMount()已卸载()已更改为onmounted()。这些函数的作用和前面介绍的完全一样，只是调用方式略有不同。所有这些钩子都必须在setup()函数或setup脚本中调用。例如，您必须在设置功能中运行挂钩，如下所示：
导出默认值{
setup() {
//所有钩子的逻辑代码都在这里
},
};
或者如下：
脚本设置
//所有钩子的逻辑代码都在这里
/脚本
因此，如果要用这个方法调用钩子，大致的代码如下：
脚本
导出默认值{
setup() {
//所有挂钩逻辑
onBeforeMount(()={
//beforeMount()逻辑
});
onBeforeUpdate(()={
//更新前()逻辑
});
},
};
/脚本
总结
Vue的生命周期相当复杂，但它为前端开发提供了许多工具来运行代码、更新数据并确保组件以所需的方式显示。
这就是这篇关于Vue生命周期钩子的文章。关于Vue生命周期钩子的更多信息，请搜索我们以前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。