【Vue】 Vue生命周期详解

article/2025/9/1 14:48:04

每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,它经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

 通过这张流程图已经可以清晰的看到Vue整个生命周期的过程

beforeCreate( 创建前 )

这个时候,在实例被完成创建出来,el和data都没有初始化,不能访问data、method,一般在这个阶段不进行操作。

created( 创建后 )

这个时候,vue实例中的data、method已被初始化,属性也被绑定,但此时还是虚拟dom,真实dom还没生成,$el 还不可用。这个时候可以调用data和method的数据及方法,createf钩子函数是最早可以调用data和method的,一般在此对数据进行初始化。

beforeMount( 挂载前)

此时模板已经编辑完成,但还没有被渲染至页面中(虚拟dom加载为真实dom),此时el存在则会显示el。在这里可以在渲染前进行最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。
当vue实例中,el为挂载目标,未对el进行定义,则this.el显示undefined,但页面中存在template也能识别挂载目标,因为template可以被看成占位符。如果对其进行定义则显示<div id="app"></div>,所以,beforeMount读取不了真实的el,在mounted才能读取到真实的el,因为el只有渲染完成后才会存在。这里讲的el是真实的el。在真实的el存在前,在beforeMount中的其实是页面中的#app,是挂载的目标。
在这里插入图片描述

 在这里插入图片描述

beforeUpdate(更新前)

重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变不能触发。

updated(更新后)

数据已经更改完成,dom也重新render完成。

beforeDestroy(实例销毁前)

在这个函数内,还是可以操作实例的,但 之后会做一系列的销毁动作,解除各种数据引用,移除事件监听,删除组件_watcher,删除子实例,删除自身self等。同时将实例属性_isDestroyed置为true。

destroyed(实例销毁)

最后执行,实例被彻底销毁,Vue生命周期结束。


http://chatgpt.dhexx.cn/article/9RUm33ih.shtml

相关文章

Vue极简教程,生命周期详解

Vue | 渐进式 | JS框架 | 极简教程 生命周期详解

vue实例的生命周期详解

Vue实例的生命周期 简介 此篇文章说的是最简单的单个VUE组件的生命周期。 官网中的长图诠释了Vue实例从创建&#xff0c;运行到销毁的整个过程。从vue实例的创建&#xff0c;运行&#xff0c;销毁期间&#xff0c;总是伴随着各种各样的事件&#xff0c;这些事件统称为生命周期…

【Vue生命周期详解】

细谈Vue声明周期 什么是生命周期&#xff1f;Vue的生命周期beforeCreate( 创建前 )&#xff1a;created ( 创建后 &#xff09;&#xff1a;beforeMount&#xff1a;mounted&#xff1a;beforeUpdate&#xff1a;updated&#xff1a;beforeDestroy&#xff1a;destroyed&#x…

VUE的十一个生命周期详解

生命周期可以分为三个阶段&#xff1a; 挂载阶段 更新阶段 销毁阶段 创建前&#xff1a;beforeCreate() 无法获取data数据 创建后&#xff1a;created() 可以获取data数据和操作methods 但不能使用DOM 挂载前&#xff1a;beforeMount() 挂载后&#xff1a;mounted() …

Vue生命周期和钩子函数详解

Vue生命周期和钩子函数详解 Vue生命周期介绍&#xff1a; 组件每个阶段它的内部构造是不一样的&#xff0c;所以一般特定的钩子做特定的事&#xff0c;比如Ajax获取数据就可以在mounted阶段。从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期&#xff0c;在…

vue生命周期详解(一)----创建期间的生命周期函数

文章目录 vue生命周期一、beforeCreate1.在beforeCreate函数里面调用data里面的属性2.在beforeCreate钩子函数里面调用methods里面的方法 二、created生命周期钩子函数1.在created钩子函数里面调用methods里面的方法和data里面的属性 三、beforeMount和mountedbeforeMount生命周…

Vue中组件生命周期过程详解

一、什么是生命周期&#xff1f; Vue中的生命周期是指&#xff1a;组件从创建到销毁的一个过程&#xff0c;在这过程中&#xff0c;我们在每个特定阶段会触发一些方法&#xff08;这些方法具备一些功能&#xff09;&#xff0c;我们给这些方法起了名字叫做(生命周期钩子函数/组…

vue生命周期详解和使用场景整理

我们从vue的原理上来理解一下vue的生命周期&#xff0c;以及使用场景&#xff08;使用场景应该试很多新手同学比较懵的地方&#xff09;&#xff0c;建议有条件的同学可以看一下vue源码&#xff0c;更能深入理解。 不看源码的同学也没有关系&#xff0c;我们从业务场景切入&…

vue生命周期钩子函数详解

先放一张官网生命周期图&#xff1a; vue有8种生命周期函数&#xff1a; 钩子函数触发的行为在此阶段可以做的事情beforeCreadtedvue实例的挂载元素$el和数据对象data都为undefined&#xff0c;还未初始化。加loading事件createdvue实例的数据对象data有了&#xff0c;$el还…

Vue的生命周期详解

Vue的生命周期 Vue的生命周期就是vue实例从创建到销毁的全过程&#xff0c;也就是 new Vue() 开始就是vue生命周期的开始。Vue实例有一个完整的生命周期&#xff0c;也就是从开始创建、初始化数据、编译模板、挂载Dom-->渲染、更新-->渲染、卸载 等一系列过程&#xff0…

Vue的生命周期函数详解

Vue有一个完整的生命周期&#xff0c;也就是从开始创建&#xff0c;初始化创建&#xff0c;编译模板&#xff0c;挂载Dom&#xff0c;渲染–>更新–>渲染&#xff0c;销毁等一系列过程&#xff0c;我们称之为Vue的生命周期。通俗的说就是Vue实例从创建到销毁的过程&#…

vue 生命周期 详解

详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期&#xff0c;也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程&#xff0c;我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程&#xff…

【vue2】vue生命周期的理解

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue生命周期的介绍、vue生命周期钩子函数详解&#xff0c;vue生命周期的执行顺序 目录 …

Vue生命周期详解(图解)

程序员学习必备书籍推荐&#xff1a; 首先我们对Vue生命周期官方给出的图进行详细解释 vue生命周期详细图解 什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整的生命周期&#xff0c;也就是从开始创建、初始化数据、编译模板、挂载…

vue的生命周期详解:从入门到精通

Vue生命周期 在学习vue的过程中&#xff0c;vue的生命周期可谓是重中之重&#xff0c;必学的一部分。 每个 Vue 实例在被创建时都要经过一系列的初始化过程&#xff0c;例如&#xff0c;需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过…

Vue生命周期(图示详解)

首先让我们先来看一张图示&#xff0c;图片很长不要紧&#xff0c;我们一步一步慢慢来看。 Vue官方生命周期图示 一旦创建Vue实例&#xff0c;就会产生很多个环节。 &#x1f4a6;把整张图片拆分成一小块一小块的去看&#xff0c;首先看第一个部分&#xff1a; &#x1f4a6;In…

【vue系列-05】vue的生命周期(详解)

深入理解vue的生命周期 一&#xff0c;vue的生命周期1&#xff0c;创建流程1.1&#xff0c;beforeCreate1.2&#xff0c;created 2&#xff0c;挂载流程2.1&#xff0c;beforeMount2.2&#xff0c;mounted 3&#xff0c;更新流程3.1&#xff0c;beforeUpdate3.2&#xff0c;upd…

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识&#xff0c;以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程&#xff0c;也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期&#xff0c;也就是从开始创建、初…

vue生命周期详解

1. 生命周期 什么是vue的生命周期? 一个组件从 创建 到 销毁 的全过程就是生命周期 Vue的生命周期 2. 钩子函数 vue框架内置函数,伴随着组件的生命周期阶段,自动执行 作用: 特定的时间点,执行特定的操作 使用场景: 组件创建完成完毕后,可在created生命周期函数中发起Ajax请求…

超详细vue生命周期解析(详解)

vue是每一个前端开发人员都绕不过的一个技术&#xff0c;在国内的市场占有量也是非常的大&#xff0c;我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先&#xff0c;生命周期是个啥&#xff1f; 借用…