前端知识点---vue的声明周期(vue)

文章目录 创建挂载更新销毁 vue的生命周期有四个阶段: 创建 挂载, 更新和销毁

创建

是vue组件从创建到准备渲染的过程 dom还没挂载到页面中 进行了初始化工作: 初始化数据(data,props) . 设置计算属性computed 初始化方法 methods 绑定事件watch 创建阶段的钩子函数beforeCreate 和created 前者是第一个生命钩子, 在它里面访问data他们的值是undefined 后者是第二个生命钩子, 此时完成了数据初始化, data, methods等已经可以用 但是dom并未挂载到页面上

<template> <h1>{{ wenzi }}</h1> <button @click="dianjiFn">点我</button> </template> <script> export default { data() { return { wenzi: "点击按钮改变文字" } }, methods: { dianjiFn() { this.wenzi = "改变文字了!" } }, beforeCreate() { console.log("数据和事件没初始化"); }, created() { console.log('数据已经初始化, 但是dom还没挂载'); } } </script> <style></style> 挂载

vue实例已经准备好把组件挂载到页面, 模版被编译成虚拟DOM, 最终渲染到实际的dom中

beforeMount 挂载之前调用, 没有插入dommounted vue实例挂载到页面后, dom已经被渲染到页面中, mounted钩子会被调用 更新 beforeUpdate 当数据发生变化但 DOM 尚未重新渲染时，Vue 会调用 beforeUpdate 钩子。

典型应用： 可以在这个钩子中访问更新前的数据，但建议不要在这里修改数据，以免造成无限循环更新。

updated 当数据更新并且视图已经重新渲染后，updated 钩子被调用。

典型应用： 可以执行基于最新 DOM 的操作，例如更新图表、重置某些 UI 状态等。

销毁

当组件不再需要时（例如，切换页面时），组件将会被销毁，相关的资源和事件监听也会被清理。 在vue2中:

beforeDestroy 组件销毁前调用，此时组件的 DOM、数据和事件还没有被销毁。 典型应用： 适合清理一些资源，如移除事件监听器、清除定时器等。

destroyed 组件销毁后调用，此时 DOM、事件监听器和数据都已经清理完毕，组件的所有资源都被销毁。

在vue3中:

beforeUnmount：在组件卸载（销毁）之前调用，对应 Vue 2 的 beforeDestroy。unmounted：在组件卸载（销毁）之后调用，对应 Vue 2 的 destroyed

vue2跟vue3在销毁过程中声明钩子不同的原因是 Vue 3 引入了 组合式 API，而 Vue 2 仅支持 选项式 API

典型应用： 可以用来做一些彻底清理的操作，确保组件销毁时没有内存泄漏。