前端知识点---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
  挂载之前调用, 没有插入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

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