Vue 生命周期钩子指南
原创
你将学到什么
了解所有 vue js 钩子、vuex（一种状态管理工具）和状态选项，将为您提供构建功能性软件产品所需的灵活性。本文将向您介绍 vue js 钩子，它还将让您基本了解如何以及何时使用这些钩子。但是，如果您愿意了解有关上述相关主题的更多信息，这里有一个链接可以为您提供指导。
- 状态选项： https: //vuejs.org/api/options-state.html
- Vuex： https: //vuex.vuejs.org/
先决条件
vue js 的基本知识足以让你快速掌握我将在本文中讨论的所有概念。另外，在其他前端框架上有扎实的基础会让你更容易更快地理解。但是，这不是必需的。
Vue js 生命周期钩子
beforeCreatecreatedbeforeMountmounted
5.beforeUpdate
updatedbeforeUnmountunmounted
让我们仔细看看如何以及何时使用这些钩子。
创建前
它被调用一次，当 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 钩子及其用例。您可以通过在您的应用程序中实现这些挂钩来应用这些知识。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。