【VUE】不可不知的生命周期~概要：梳理常见的vue生命周期，了解每个阶段组件的状态不同的阶段都有自己的钩子，钩子的

概要： 梳理常见的vue生命周期，了解每个阶段组件的状态

不同的阶段都有自己的钩子，钩子的作用就是，依据这个阶段数据或组件状态的特性，给你一些做某些处理的机会。

首先：

上官网图例：

下面来逐一理解：

先简单介绍下setup函数：

1,setup() 钩子是在组件中使用组合式 API 的入口
2,setup中没有this
3,setup函数只会在组件初始化的时候执行一次
4,setup() 钩子会在所有选项式 API 钩子之前调用，beforeCreate() 也不例外。

可使用setup语法糖：

<script setup lang="ts">
import { onMounted } from 'vue'   //vue3中钩子的使用需要引入
onMounted(() => {
    console.log('mounted')
})
</script>

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用

这个时候，刚刚初始化了一个vue空的实例对象，这个对象身上只有默认的一些生命周期函数和默认的事件，其他东西都未创建。

注意：此时，data和methods中的数据都还没有初始化

此时，data和methods都已经初始化好了

注意：如果要调用methods中方法，或者操作data中数据，最早只能在created中

此函数执行时，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的。

此前：编译模板，渲染虚拟DOM。

此两个阶段中间：会将内存中编译好的模板真实的替换到浏览器中。

只要执行完了mounted，就表示整个vue实例已经初始化完毕，挂载完成。

此时，组件已经脱离了创建阶段，进入到了运行阶段。

注意：如果要通过某些插件操作页面上的DOM节点，最早在mounted中。

同时，一般可以在此做些Ajax请求。

以上为创建阶段

下面进入运行阶段

此时页面中显示的数据还是旧的，但data数据是最新的。

即页面尚未和最新的数据保持同步。

virtual DOM re-render and patch

数据从data（model层）--> view（视图层）的更新

① 依据最新data，渲染出最新的内存DOM树

② 将新的内存DOM树，渲染到真实的页面中去

此时，页面和data数据已经保持同步了，都是最新的。

下面进入销毁阶段

组件实例被卸载之前，当这个钩子被调用时，组件实例依然还保有全部的功能。

此时，data，methods，过滤器，指令等都还可以用

注意：此时可清除一些副作用：

1，自定义事件； 2，setTimeOut定时任务； 3，绑定window.DOM事件等等。

组件实例被卸载之后调用，

此时也可以手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接等。

以上，感谢阅读~希望有帮助，如有错误，欢迎指正！