目录

• keep-alive 中的生命周期哪些
• Vue 子组件和父组件执行顺序

  ---

  keep-alive 中的生命周期哪些

  在 Vue.js 中， 是一个抽象组件，用于缓存动态组件。当动态组件被包裹在 标签中时，这些动态组件将会被缓存起来，而不是每次切换都重新渲染。

  本身并没有生命周期钩子函数，但它包裹的动态组件具有自己的生命周期。当一个被 缓存的组件被激活或停用时，它会触发一系列特定的生命周期钩子函数。

  对于被 缓存的组件，以下是其生命周期钩子函数：

  • activated: 当被包含在 中的组件被激活时调用。这表示该组件从缓存中被加载。
  • deactivated: 当被包含在 中的组件被停用时调用。这表示该组件被缓存起来。

    这两个生命周期钩子函数可以让开发者在组件被缓存和激活时执行相应的逻辑。例如，可以在 activated 钩子函数中进行一些数据重新加载或其他操作，以确保在组件被激活时更新数据或执行其他必要的任务。

    Vue 子组件和父组件执行顺序

    在 Vue 中，父组件和子组件的执行顺序遵循一定的规律。当父组件包含一个或多个子组件时，它们之间的执行顺序如下：

    1. 父组件的生命周期：

       • beforeCreate: 在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
       • created: 实例已经创建完成，完成了数据观测，属性和方法的运算，初始化事件，但挂载阶段还没开始。

       • 子组件的生命周期：

         • 对于每个子组件，其生命周期与父组件类似，它们会按照创建、挂载、更新和销毁等阶段依次执行相应的钩子函数。

         • 父组件的挂载：

           • beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
           • mounted: 实例已经挂载到 DOM 上。这时可以进行 DOM 操作。

           • 子组件的挂载：

             • 子组件的挂载顺序取决于其在父组件模板中的位置和顺序，先在父组件挂载完成后，才会依次挂载子组件。

    在 Vue 中，父组件和子组件的生命周期钩子函数执行顺序可以总结如下：

    加载渲染过程：

    1. 父组件：

       • beforeCreate
       • created
       • beforeMount

       • 子组件：

         • beforeCreate
         • created
         • beforeMount
         • mounted

         • 父组件：

           • mounted

    更新过程：

    1. 父组件：

       • beforeUpdate

       • 子组件：

         • beforeUpdate
         • updated

         • 父组件：

           • updated

    销毁过程：

    1. 父组件：

       • beforeDestroy

       • 子组件：

         • beforeDestroy
         • destroyed

         • 父组件：

           • destroyed

    这些生命周期钩子函数的执行顺序对于理解 Vue 组件的创建、更新和销毁过程非常重要，开发者可以利用这些钩子函数来执行一些初始化操作、清理工作以及其他必要的逻辑。

    总体来说，父组件的生命周期钩子函数会在子组件的生命周期钩子函数之前执行，而在挂载阶段，父组件会在子组件之前挂载到页面上。这种顺序保证了在父子组件之间正确地传递数据和确保组件在正确的时机被挂载和渲染。

    持续学习总结记录中，回顾一下上面的内容：

    keep-alive是Vue提供的一个组件，它可以将需要缓存的组件缓存起来，从而提高应用的性能。keep-alive组件有两个生命周期钩子函数，分别是activated和deactivated。当缓存的组件被激活时，会调用activated钩子函数；当缓存的组件被停用时，会调用deactivated钩子函数。
    

    在Vue中，子组件的生命周期钩子函数会在父组件的生命周期钩子函数之后执行。例如，当一个父组件包含一个子组件时，父组件的created钩子函数会在子组件的created钩子函数之前执行；父组件的mounted钩子函数会在子组件的mounted钩子函数之后执行。
    

    当使用keep-alive组件时，缓存的子组件的生命周期钩子函数会在父组件的生命周期钩子函数之外执行。例如，当一个父组件包含一个被缓存的子组件时，父组件的created钩子函数会在子组件的created钩子函数之前执行，但是子组件的activated钩子函数会在父组件的mounted钩子函数之后执行。
    

    总之，keep-alive组件的生命周期钩子函数和缓存的子组件的生命周期钩子函数都是在父组件的生命周期钩子函数之外执行的。