文章目录
- 创建
- 挂载
- 更新
- 销毁
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
挂载之前调用, 没有插入dom - mounted
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
典型应用： 可以用来做一些彻底清理的操作，确保组件销毁时没有内存泄漏。
