vue2生命周期

什么是声明周期？

生命周期概念是借鉴了软件工程和编程中普遍存在的概念，描述一个实体从开始到结束的整个过程。与植物学的生命周期相似。Vue的生命周期概念可以看作是对生物学生命周期概念的一种抽象借鉴和应用。

生命周期阶段

Vue 实例有一个完整的生命周期，即从创建到销毁的过程，这个过程中会依次经历一系列的钩子函数。

初始化阶段

1. beforeCreate:

   • vue实例初始化未被调用，目前只是知道this的指向是指向这个vue实例，至于this指向为什么没有调用就知道，大概是vue内置里面有一个强制指向（个人猜测，我没看过源码，我小白看不懂，只是看了一些视频大概猜测）因此实例的 data、computed properties、methods 等还未初始化，这里初始话就是这些函数还没有存到内存中，就是相当于什么都没有的状态，因为还没有被挂在，所以DOM也操作不了，
   • 什么情况会使用这个钩子：需要配置插件，性能追踪，在组件创建之前就决定要不要渲染出来，或者全局状态pinia ,几乎很少用到这个钩子函数。

2. created:

   • 创建实例后被调用。
   • 这步的时候，data里面的数据已经是响应式的了，也就是说，vue通过Objec.defineProperty进行数据劫持，里面的函数set和get已经可以让数据变成响应式了，与data同级的函数已经可以和data进行互动了
   • 在执行这个钩子函数的时候，模板还没有开始编译，因此还是不能操作DOM,
   • 这个钩子里面经常做网络请求，

挂载阶段

1. beforeMount:

   • 这个函数也很好理解，，未挂在之前，这个函数调用的时候，虚拟dom就是是render函数已经被调用，并生成了虚拟dom,但是还没有转换成真实DOM（一丁点都没转换到真实DOM ），也就说页面上还是没有数据的，所以，这个钩子函数无法操作真实dom的，几乎不常用

2. mounted:

   • 这个位置就很特殊，挂载后，因为父组件里面有可能有子组件，所以在mounted执行之前是有一个过程的。
   • 首先，是开始执行父组件的生命周期，执行完beforeMount并在mounted之间，首先是父组件开始由虚拟DOM向真实DOM开始转换，如在转换的时候碰到子组件，先执行子组件里面的生命周期，子组件的真实DOM节点并且插入到父组件完成之后，子组件的mounted才算是完成，然后父组件的mounted完成（完全个人理解）

更新阶段

1. beforeUpdate:

   • 这个钩子函数是data已经发生变化，虚拟om也发生变化，但是没有对比到真实dom上，在此期间，不可以修改data和组件

2. updated

   • updated 生命周期钩子确实是在组件的数据变化引起的虚拟 DOM 重新渲染并且改变已经反映到真实 DOM 之后被调用的。此时页面已经渲染了最新的数据，

销毁阶段

1. beforeDestroy:

   • 实例销毁之前调用。在这一步，实例仍然完全可用。
   • 这是清理定时器或解绑全局事件监听器的好时机。

2. destroyed:

   • Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
   • 通常用于在组件被销毁后执行清理操作。

这些生命周期钩子提供了在不同阶段管理组件的有力手段，比如加载数据、直接操作DOM、清理资源等。理解和合理使用这些生命周期钩子对于开发高效、可维护的Vue应用至关重要。