Vue的生命周期函数有哪些?

Vue的生命周期函数指的是Vue实例从创建到销毁的过程中,自动执行的特定函数。这些函数允许你在Vue实例的不同阶段添加自定义的代码。Vue 2.x 和 Vue 3.x 的生命周期函数略有不同,但基本的概念是相似的。

Vue 2.x 的生命周期函数

  1. beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  2. created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  4. mounted:实例被挂载后调用,这时 el 被新创建的 vm.el替换了,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个在内服渲染的元素上,当mounted被调用时vm.el 也在文档内。
  5. beforeUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
  6. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
  7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  8. destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也都会被销毁。

Vue 3.x 的生命周期函数

Vue 3.x 引入了 Composition API,这使得一些生命周期函数的使用方式发生了变化,但基本概念仍然是相同的。同时,Vue 3.x 还新增了一些生命周期函数,如 setup。但传统的选项式 API 中的生命周期函数仍然可用。

在 Composition API 中,你可以使用 onMountedonUpdatedonBeforeUnmount 等函数来替代传统的生命周期函数。

请注意,Vue 3.x 还引入了一些其他的 Composition API 函数,如 refreactivecomputed 等,这些函数与生命周期函数一起使用,可以更加灵活地管理组件的状态和行为。

相关推荐
小笔学长16 分钟前
调试技巧:使用 debugger 语句
javascript·前端开发·debugger调试·项目调试实战
千里马-horse25 分钟前
TypedArrayOf
开发语言·javascript·c++·node.js·napi
小笔学长33 分钟前
Webpack 配置优化:提高打包速度与质量
前端·项目实战·前端开发·webpack优化·打包性能优化
Hao_Harrision38 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨| NotesApp(便签笔记组件)
javascript
优爱蛋白41 分钟前
SCF His Tag 重组蛋白:c-Kit受体信号研究与干细胞培养应用的关键试剂
前端·人工智能·健康医疗
C_心欲无痕1 小时前
react - Suspense异步加载组件
前端·react.js·前端框架
JosieBook1 小时前
【Vue】05 Vue技术——Vue 数据绑定的两种方式:单向绑定、双向绑定
前端·javascript·vue.js
前端小L1 小时前
贪心算法专题(十五):借位与填充的智慧——「单调递增的数字」
javascript·算法·贪心算法
想学后端的前端工程师1 小时前
【浏览器工作原理与性能优化指南:深入理解Web性能】
前端·性能优化
Aliex_git1 小时前
内存堆栈分析笔记
开发语言·javascript·笔记