当前位置：首页 > news >正文

Vue的生命周期了解

news 来源：原创 2024/9/21 1:32:06

1.何为Vue的生命周期

2.Vue2生命周期阶段

（1）beforeCreate(创建前)

（2）created(创建后)

（3）beforeMount(挂载前)

（4）mounted(挂载后)

（5）beforeUpdate(更新前)

（6）updated(更新后)

（7）beforeDestroy(销毁前)

（8）destroyed(销毁后)

3.Vue3生命周期阶段

4.Vue2与Vue3生命周期差异

（1）生命周期钩子函数的命名变化

（2）新增的生命周期钩子函数

（3）生命周期的触发时机和合并方式

（4）生命周期的组合式 API

（5）移除或更改的钩子函数

5.Vue每个生命周期一般进行什么操作？

4.created和mounted的区别

编辑

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

（1）加载渲染过程

（2）更新过程

（3）销毁过程

6.keep-alive的生命周期

（1）deactivated

（2）activated

文章内容：在Vue框架中，组件的生命周期是一个核心概念。而Vue 2和Vue 3在生命周期方面既有相似之处，也存在一些关键差异。文章将对这两个版本的生命周期进行简要说明，探讨它们之间的差异，以及父子组件生命周期的执行顺序，并解析<keep-alive>组件特有的deactivated和activated生命周期钩子。

1.何为Vue的生命周期

Vue实例从开始创建、初始化数据、模板编译、挂载DOM、渲染更新到销毁等一系列过程，称为Vue的生命周期。每个Vue实例在被创建时都要经过一系列的初始化过程，在这个过程中的一些阶段，vue会调用指定的一些组件方法。

生命周期：API 参考 | Vue.js (vuejs.org)

2.Vue2生命周期阶段

Vue基本生命周期函数有下面几个阶段：创建阶段、挂载阶段、更新阶段、卸载阶段、其他。

（1）beforeCreate(创建前)

实例刚在内存中创建出来，组件实例上的 data、computed、watch、methods 上的方法和数据都还未被初始化，所以它们都无法被访问。

（2）created(创建后)

在实例创建完成后被立即调用。在这一步实例已完成数据，属性和方法的运算，watch/event 事件回调，但是还没有开始编译模板，渲染的节点还未挂载到DOM，所以不能访问到$el属性。

（3）beforeMount(挂载前)

在挂载开始之前被调用，相关的 render 函数首次被调用。模板已经编译完成，但是尚未挂载到 DOM 上，所以$el仍然不可见。

（4）mounted(挂载后)

el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。此时组件的模板已经渲染到了页面上，可以访问 DOM 元素。

（5）beforeUpdate(更新前)

状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。

（6）updated(更新后)

实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了。

（7）beforeDestroy(销毁前)

Vue 实例销毁之前调用。在这一步实例仍然完全可用。

（8）destroyed(销毁后)

Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也都会被销毁。

图片来源vue2官网：生命周期钩子 | Vue.js (vuejs.org)

3.Vue3生命周期阶段

Vue 3 引入了 Composition API，允许以更灵活的方式组织和重用逻辑。可以通过 onXxx 函数来访问它们，其中 Xxx 是生命周期钩子的名称要首字母大写。

onBeforeMount

onMounted

onBeforeUpdate

onUpdated

onBeforeUnmount

onUnmounted

这些钩子的用途与 Vue 2中的相同。

4.Vue2与Vue3生命周期差异

Vue 3 与 Vue 2 在生命周期方面存在几个显著的不同点。

（1）生命周期钩子函数的命名变化

在 Vue 3 中，钩子函数的名称被修改为以 "on" 为前缀，"onCreated"、"onBeforeMount"、"onMounted"、"onBeforeUpdate"、"onUpdated"、"onBeforeUnmount"、"onUnmounted" 等。

（2）新增的生命周期钩子函数

Vue 3 引入了一些新的生命周期钩子函数，引入了 "onRenderTracked" 和 "onRenderTriggered" 钩子函数，用于跟踪和触发组件的渲染过程，有助于优化渲染性能。

（3）生命周期的触发时机和合并方式

Vue 2：组件的生命周期钩子函数是在组件创建、挂载、更新和销毁等不同阶段被依次触发的，这些钩子函数会按照特定的顺序依次执行。

Vue 3：引入了基于组合式 API 的组件写法，使用新的生命周期函数 "setup" 来配置组件，并且采用了异步更新的机制。在 Vue 3 中，组件的创建和更新是异步执行的，生命周期函数的触发时机也可能发生变化。Vue 3还采用了一种新的生命周期的合并方式，就是将相同阶段的钩子函数合并为一个函数，以提高性能并优化组件运行的顺序。

（4）生命周期的组合式 API

Vue 3 引入了组合式 API，这是一种新的编写组件的方式，允许开发者将组件的逻辑组织成可复用的函数。在组合式 API 中，生命周期钩子函数不再直接挂载在组件选项上，而是通过 onXxx 函数（如 onMounted、onUpdated 等）在 setup 函数内部使用。

（5）移除或更改的钩子函数

Vue 3 移除了 Vue 2 中的 "beforeDestroy" 和 "destroyed" 钩子函数，改为使用 "beforeUnmount" 和 "unmounted" 钩子函数。

5.Vue每个生命周期一般进行什么操作？

beforeCreate(创建前)

不常用，主要用于初始化一些不需要依赖 Vue 实例数据或方法的操作。

created(创建后)

常用于发送异步请求获取数据，进行页面初始化操作等。

beforeMount(挂载前)

可以进行最后一次的数据修改，不会触发重新渲染。

mounted(挂载后)

常用于执行依赖于 DOM 的操作，如使用 jQuery 插件初始化 DOM 元素。

beforeUpdate(更新前)

不常用，因为 Vue 的响应式系统会自动处理 DOM 更新。

updated(更新后)

常用于执行依赖于 DOM 的操作，但要避免更改状态。

beforeDestroy(销毁前)

常用于执行清理工作，如移除事件监听器或定时器。

destroyed(销毁后)

同 beforeDestroy，但此时组件已完全销毁。

4.created和mounted的区别

created在模板渲染成html前调用,即通常初始化某些属性值，然后再渲染成视图。
mounted在模板渲染成html后调用,通常初始化页面完成后,再对html的dom节点进行一些需要的操作。

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

（1）加载渲染过程

父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted

（2）更新过程

父beforeUpdate-子beforeUpdate-子update-父updated

（3）销毁过程

父beforeDestroy-子beforeDestroy-子destroyed-父destroyed

6.keep-alive的生命周期

<keep-alive>常用于需要保持状态的组件，如列表的滚动位置、表单的输入内容等，在用户频繁切换页面或组件时，能够提供良好的用户体验。

在Vue中，<keep-alive>是一个内置组件，主要用于缓存动态组件，在组件切换的过程中避免重复渲染DOM。<keep-alive>组件本身并不具有自己的生命周期钩子函数，但它会影响被其包裹的组件的生命周期。当组件被<keep-alive>包裹时，该组件会获得两个特殊的生命周期钩子函数：deactivated和activated。