VUE生命周期全面系统详解

2024-09-28 09:05:40

什么是生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数

生命周期的作用

创建后发起axax请求
挂载后操作dom
添加事件监听
销毁前移除间隔调用,事件监听
说明:并不是每个生命周期都必须使用

vue生命周期有哪些

如下图(记不住就抄八百遍)

Vue 生命周期总共分为几个阶段

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

创建前后

1）beforeCreate创建前

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

特点: 有this,没有data,methods,dom节点

beforeCreate() {
			// 创建前,有this,没有data,methods,dom节点
			console.log("beforeCreate",this.num ,this)
		},

2）created创建后

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

特点:有this,没有$els,dom节点

用处:发起ajax请求,开启定时器,监听事件(window)

created() {
			// 创建完毕,有data,没有el
			console.log("created",this.num ,this.$el)
			// 作用发起ajax请求,开启定时器,监听事件(window)
			// 开启定时器
			this.stopId = setInterval(() => {
				this.num++;
				console.log("滴答")
			}, 1000)
			// 监听事件
			window.addEventListener("resize",this.showWin)
		},

挂载前后

3）beforeMounte挂载前

特点: 有$el,没有渲染数据

在挂载开始之前被调用：相关的 render 函数首次被调用。

		beforeMount() {
			// dom挂载前,有el,没有渲染数据
			// beforeMount 访问&el 为什么是 undefined
			// 因为使用的脚手架,动态更新造成的(在非脚手架状态下可以)
			console.log("beforeMount", this, document.querySelector("#btn"))
		},

4）mounted挂载后

特点: 有dom节点,数据也渲染

用处: 操作dom节点,发起ajax请求,开启定时器,监听事件, el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

		mounted() {
			// 挂载完毕
			console.log("*mounted", this, document.querySelector("#btn"))
			// this 当前组件的实例
			// this.$el 当前组件的dom节点
			// this.num当前组件的 属性
			// console.log(this,this.$el,"组件的实例this",this.num)
			// 作用:作用发起ajax请求,开启定时器,监听事件,操作dom节点
		},

更新前后

5）beforeUpdate更新前

特点: 会执行多次,数据更新,dom节点没有更新

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

		// 更新前后
		beforeUpdate() {
			// 组件的更新前,数据更新,视图没有更新
			console.log("beforeUpdate", this.num, document.querySelector("#btn").innerText)
		},

6）updated更新后

特点: 会执行多次,数据更新,dom节点也更新

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

		updated() {
			// 组件更新后,数据更新,视图已经更新
			console.log("updated", this.num, document.querySelector("#btn").innerText)
		},

销毁前后

7）beforeDestroy销毁前

特点: 数据更新,视图没有更新

用处:移除事件监听,停止计时器

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

		// 卸载前后
		beforeDestroy() {
			// 结束定时器
			clearInterval(this.stopId);
			//移除事件监听
			window.removeEventListener("resize", this.showWin)
			// 数据可以更新,视图已经不响应
			// this.num++;
			// console.log( "卸载前","beforeDestroy")
			// alert("卸载前")
		},

8）destroyed销毁后

特点: 没有this,切换视图与vue实例的联系

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

		destroyed() {
			// 切断视图与vue实例的联系
			// this.num++;
			console.log("卸载后", "destroyed")
		}

效果如下:

问题

第一次加载页面会触发哪几个钩子函数？

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

到此这篇关于VUE生命周期全面系统详解的文章就介绍到这了,更多相关VUE生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue生命周期详解

这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事单组件的生命周期父子组件的生命周期兄弟组件的生命周期宏mixin的生命周期生命周期:Vue 实例从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子 1. 生命周期钩子函数下面这张图是vue生命周期各个阶段的执行情况: 注意: created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息
详解Vue生命周期和MVVM框架

目录生命周期与动态组件有关的两个特殊的钩子: 与组件异常捕获有关的一个钩子: 生命周期有哪些生命周期组件从开始到结束的全过程创建阶段:beforeCreate.created挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 组件从开始到结束的全过程创建阶段:beforeCreate.created 挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 销毁阶段:beforeDestro
Vue中的生命周期介绍

什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreate Created beforeMount mounted beforeUpdate updated beforeDestroy destroyed Vue组件的生命周期共分为三个阶段,如下图所示: 创建阶段和销毁阶段在组件的生命周期中只会执行一次,而更新阶段会执行多次. 先看一下创建阶段完成的事情:
vue生命周期beforeDestroy和destroyed调用方式

目录生命周期beforeDestroy和destroyed调用情境一情景二 beforeDestroy和destroyed生命周期函数的特点生命周期beforeDestroy和destroyed调用情境一离开当前路由,会直接调用: 当前路由不使用缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁情景二离开当前路由,不会直接调用,需要程序控制调用: 当前路由使用缓存,离开当前路由不会直接调用 beforeDestroy 和 befor
Vue3生命周期Hooks原理与调度器Scheduler关系

目录写在最前:本文章的目标 Vue3生命周期的实现原理生命周期类型各个生命周期Hooks函数的创建创建生命周期函数createHook injectHook函数生命周期Hooks的调用 Vue3调度器(Scheduler)原理 Vue父子组件的生命周期的执行顺序父子组件的执行顺序父子组件生命周期的执行顺序组件卸载的时候,是在卸载些什么呢? 组件更新的调度器里的队列任务的失效与删除的区别父子组件执行顺序与调度器的关系 Hooks的本质最后写在最前:本文章的目标 Vue3的生命
Vue 全部生命周期组件梳理整理

目录前言生命周期 created:在创建之后使用: beforeMount:挂载数据到DOM之前会调用 mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM beforeUpdate:在更新DOM之前调用该钩子应用:可以获取原始的DOM updated:在更新DOM之后调用该钩子应用:可以获取最新的DOM beforeDestroy: destroyed: activated: 用于组件激活的功能 deactivated:用于组件被停用前言今天继续加油学习
Vue 中生命周期定义及流程

目录一.生命周期定义二.生命周期流程三.总结一.生命周期定义生命周期:又名:生命周期回调函数.生命周期函数.生命周期钩子生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的 this 指向是 vm 或组件实例对象做一个小例子,要求页面的文字一上来透明度就周而复始的从1变到0 <div id="root"> <h2 :style="{opaci
带你一文了解Vue生命周期钩子

目录前言生命周期钩子选项式API(Options API) 生命周期流程图运行生命周期挂钩 beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeUnmount() unmount() 组合式API(Composition API)中的生命周期钩子 setup() 替换 created() 和 beforeCreated() 钩子可以与 setup() 一起使用总结前言和其他框
vue2与vue3中生命周期执行顺序的区别说明

目录 vue2与vue3中生命周期执行顺序区别生命周期比较简单例子说明三种情况下的生命周期执行顺序 1.单页面下生命周期顺序 2.父子.兄弟组件的生命周期顺序 3.不同页面跳转时各页面生命周期的执行顺序 vue2与vue3中生命周期执行顺序区别生命周期比较 vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destro
VUE生命周期全面系统详解

目录什么是生命周期生命周期的作用 vue生命周期有哪些 Vue 生命周期总共分为几个阶段 1)beforeCreate创建前 2)created创建后 3)beforeMounte挂载前 4)mounted挂载后 5)beforeUpdate更新前 6)updated更新后 7)beforeDestroy销毁前 8)destroyed销毁后问题什么是生命周期每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM
Vue 生命周期和数据共享详解

目录 1.组件的生命周期 1.1生命周期与生命周期函数 1.2组件生命周期函数的分类 1.3生命周期图示以及详解 2.组件之间的数据共享 2.1组件之间的关系 2.2父向子传值 2.3子向父传值 2.4兄弟之间的数据关系总结 1. 组件的生命周期 1.1 生命周期与生命周期函数生命周期是指一个组件从创建 => 运行 => 销毁的整个时间段,强调的是一个时间段.生命周期函数是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 1.2 组件生命周期函数的分类 1.3
Vue的属性、方法、生命周期实例代码详解

实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
Maven 配置文件生命周期常用命令详解

当前,JVM生态圈主要的三大构建工具: Apache Ant(带着Ivy) Maven Gradle 对于初学者,Ant是最清晰的,只要读懂Xml配置文件你就能够理解它干了什么,但是ant文件很容易变的更加复杂.Maven有自己的工程目录规则和内置的构建生成周期,从而使构建文件更加简单.gradle有很多开箱即用的插件,语法更加短小精悍,易于理解. 在讲解maven之前这里我们先简单比较下Maven和Ant.下面是一个简单的Ant例子.这个例子可以看出我们需要明确的告诉Ant.我们想让他做什么.
IOS UIView的生命周期的实例详解

IOS UIView的生命周期的实例详解任何对象的者有一个生命周期,即都存在一个实例化到销毁的过程. UIView对象也不例外,那么UIView从init/new开始后,直到dealloc结束的过程中都经历了哪些过程呢? 首先自定义继承自UIView的对象LifeView #import <UIKit/UIKit.h> @interface LifeView : UIView @end #import "LifeView.h" @interface LifeView ()
Java Spring循环依赖原理与bean的生命周期图文案例详解

前言 Spring是如何处理循环依赖的,又是怎么做到,互相注入对方的proxy bean而不是raw bean的?现在就分析一下一.循环依赖是什么 Spring中放入两个Service,分别是C1和C2,然后C1和C2又互为对方的成员变量.这种情况C1和C2就可以说是相互循环依赖了二.源码图解 1. bean的主要生命周期图解上图是一个没有循坏依赖的bean的主要生命周期节点,下图的循坏依赖可以结合该图解一起看 2.循环依赖图解可以看到里面有一个很重要的逻辑: 当一个bean经过所有的步
Vue3生命周期钩子函数详解

本文实例为大家分享了Vue3生命周期钩子函数的具体代码,供大家参考,具体内容如下一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数:onMounted() : 组件挂载完成后执行的函数:onBeforeUpdate(): 组件更新之前执行的函数:onUpdated(): 组件更新完成之后执行的函数:onBeforeUnm
vue生命周期的探索

那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢? 根实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 组件实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted)
Vue生命周期区别详解

生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因
Vue生命周期函数调用详解

目录生命周期 Vue.mixin 生命周期选项合并调用生命周期函数结语生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi