VUE的生命周期

1、vue生命周期是什么?

  • Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

2、vue生命周期的八个阶段

  • 1.beforeCreate:会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。此时不能获得DOM节点。
  • 2.created:在这个阶段vue实例已经创建,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此 $el 属性仍不可用。仍然不能获取DOM元素。
  • 3.beforeMount:在组件内容被渲染到页面之前自动执行的函数,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。
  • 4.mounted:在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。
  • 5.beforeUpdate:数据变化的时候自动执行的函数,此时变化后的数据还未渲染到页面之上。.
  • 6.updated: 数据变化之后自动执行的函数,此时变化后的数据已经渲染到页面之上。
  • 7.beforeUnmount: 当 Vue 应用被销毁时,自动执行的函数。
  • 8.unmounted:当 Vue 应用被销毁后,且 dom 完全销毁之后,自动执行的函数。
    lifecycle.png
生命周期.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue 生命周期 从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整的生命周期,也就是从开始...
    前端菜菜1号阅读 342评论 0 0
  • Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,...
    鄙人才疏学浅阅读 664评论 0 1
  • 一般说的 Vue 生命周期指的是打包完成后的 js 代码去执行的过程,区别于开发环境和 HTML 嵌入 Vue.j...
    Wermdany阅读 1,198评论 1 2
  • 生命周期 在使用vue的过程中,对vue的生命周期的理解是最基础的开始,也许你不需要全部理解,但对其中最主要的几个...
    刀刀小技阅读 1,343评论 1 2
  • vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一...
    王哈哈zzz阅读 272评论 0 0

友情链接更多精彩内容