Vue 生命周期钩子指南

你将学到什么

了解所有 vue js 钩子、vuex（一种状态管理工具）和状态选项，将为您提供构建功能性软件产品所需的灵活性。本文将向您介绍 vue js 钩子，它还将让您基本了解如何以及何时使用这些钩子。但是，如果您愿意了解有关上述相关主题的更多信息，这里有一个链接可以为您提供指导。

• 状态选项： https: //vuejs.org/api/options-state.html
• Vuex： https: //vuex.vuejs.org/

先决条件

vue js 的基本知识足以让你快速掌握我将在本文中讨论的所有概念。另外，在其他前端框架上有扎实的基础会让你更容易更快地理解。但是，这不是必需的。

Vue js 生命周期钩子

1. beforeCreate
2. created
3. beforeMount
4. mounted

5.beforeUpdate

1. updated
2. beforeUnmount
3. unmounted

让我们仔细看看如何以及何时使用这些钩子。

创建前

它被调用一次，当 vue 实例被初始化时，我所说的“已初始化的 vue 实例”是什么意思。好吧，初始化了一个 vue 实例，以便可以处理数据、观察者、计算和方法。您也可以将此数据称为相关选项（状态选项）。

beforeCreate(){
  console.log('instanced initialized')
}

创建

在处理完所有状态选项后调用 Created。但是，该实例尚未安装到 DOM（文档对象模型）。在此阶段您无法访问 DOM，因为尚未安装该组件。您只能从后端获取数据，也可以操作反应数据。

created(){
  console.log("is Processed state options'")
}

挂载前

这是已创建的挂钩已完成、已处理反应状态并准备安装到 DOM 上的阶段。安装之前会发生什么？考虑一下！...在安装之前。

beforeMount(){
   console.log("before mount")   
}

已安装

在创建组件 DOM 并将其添加到父组件后调用 Mounted。您可以访问反应式组件，操作 DOM 元素。

mounted(){
    console.log("mounted")
}

更新前

此挂钩可用于在 DOM 更新之前对其进行修改。由于数据选项中的重新评估，在渲染的组件的一部分发生更改后立即调用它。

beforeUpdated(){
    console.log("before component update")
}

更新

当反应数据发生变化时，会在您的应用程序中调用此挂钩，这会导致组件的 DOM 更新。然而，很多人仍然将其与 watcher 混淆，watcher 监听响应式数据的变化，而 updated hook 监听虚拟 DOM 的变化。

updated(){
    console.log("updated");
}

卸载前

这个钩子在组件被卸载之前被调用，而组件实例仍然是活动的并且有效地工作。

beforeUnmount(){
   console.log("before unmount")
}

卸载

Vue 实例已被卸载，如果组件实例、DOM、反应数据、观察者已停止。如果您必须通知服务器您的组件已卸载或发送分析，则可以使用它。

unmounted(){
   console.log("component unmounted")
}

结论

在本文中，向您介绍了 vue js 钩子及其用例。您可以通过在您的应用程序中实现这些挂钩来应用这些知识。