vue的生命周期钩子函数怎么应用

本篇内容介绍了“vue的生命周期钩子函数怎么应用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

目前创新互联已为上1000+的企业提供了网站建设、域名、网站空间、网站改版维护、企业网站设计、硚口网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

在vue中，生命周期钩子函数指的是当生命周期经历创建和更新DOM的过程中，会在其中运行的一些函数；在这些函数内部可以创建和声明vue组件。

本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。

什么是vue的生命周期钩子函数

每个 Vue 实例都经过一系列初始化步骤。从创建时设置数据到编译模板，将实例装载到DOM，最后在数据更改期间更新 DOM。这个过程被称为 Vue 实例的生命周期，在默认情况下，当它们经历创建和更新 DOM 的过程中，会在其中运行一些函数，在这些函数内部创建并声明 Vue 组件，这些函数称为生命周期钩子。

Vue 有八种生命周期方法：

• Before create

• Created

• Before mount

• Mounted

• Before update

• Updated

• Before destroy

• Destroyed

本文将使用测试组件，它位于 src 文件夹内的 components 文件夹中。它应该看起来像这样：

// src/components/Test.vue



h4 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}

beforeCreate()

这是在 Vue.js 中调用的第一个生命周期钩子，它在 Vue 实例初始化后立即被调用。

你可以在开发环境中运行程序来检查界面。

npm run serve

注意，在加载组件之前，首先执行的是在生命周期钩子中写入的 alert 语句。这正是函数在 Vue 引擎创建应用程序组件之前调用的表现。此时正处在 beforeCreate 阶段，尚未设置计算属性、观察者、事件、数据属性和操作等内容。

created()

正如你所猜测的那样，这是在 beforeCreated 钩子之后立即调用的第二个生命周期钩子。在这个阶段，Vue 实例已经初始化，并且已经激活了计算属性、观察者、事件、数据属性和随之而来的操作。

如果你运行该程序，你将会发现现在可以显示数据类型。着在 beforeCreated 阶段是不可能的，因为这时发生的激活还没有发生。但是 Vue 实例在此阶段尚未安装，因此你无法在此处操作 DOM，元素属性尚不可用。

beforeMount()

这是在 DOM 上挂载实例之前的那一刻，模板和作用域样式都在这里编译，但是你仍然无法操作DOM、元素属性仍然不可用。

mounted()

这是在 beforeMounted 之后调用的下一个生命周期钩子。在安装实例后会立即调用它。现在 app 组件或项目中的其他组件都可以使用了。现在可以进行数据适合模板、DOM元素替换为数据填充元素之类的操作了，元素属性现在也可以使用了。

这是使用 Vue CLI 创建的项目的默认位置，因为正如我们在开头看到的那样，已经在 main.js 文件中完成了安装。这就是你有可能无法使用其他挂钩的原因，因为默认情况下已经为你安装了实例。

beforeUpdate()

在这里对需要更新 DOM 的数据进行更改。在进行删除事件侦听器之类的更改之前，此阶段适合任何逻辑。

最初在 DOM 上有一个欢迎注释，但是在挂载阶段（可以操作DOM的地方），数据会发生变化，因此beforeUpdate 的 alert 会在更改之前出现。

updated()

在对 DOM 更新之后立即调用此生命周期钩子，它在调用 beforeUpdate 挂钩之后执行。可以在此处执行与 DOM 相关的操作，但不建议更改此钩子内的状态，因为 Vue 已经专门为此提供了平台。

beforeDestroy()

调用此 Vue 生命周期钩子的时机是在 Vue 实例被销毁之前，实例和所有函数仍然完好无损并在此处工作。在这个阶段你可以执行资源管理、删除变量和清理组件。

destroyed()

这是 Vue 生命周期的最后阶段，其中所有的子 Vue 实例都已被销毁，事件监听器和所有指令之类的东西在此阶段已被解除绑定。在对象上运行 destroy 之后调用它。

当你运行程序并查看控制台时，将看不到任何内容。

“vue的生命周期钩子函数怎么应用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！