VUE生命周期全面系统详解

目录
  • 什么是生命周期
  • 生命周期的作用
  • vue生命周期有哪些
  • Vue 生命周期总共分为几个阶段
    • 1）beforeCreate创建前
    • 2）created创建后
    • 3）beforeMounte挂载前
    • 4）mounted挂载后
    • 5）beforeUpdate更新前
    • 6）updated更新后
    • 7）beforeDestroy销毁前
    • 8）destroyed销毁后
  • 问题

什么是生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 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生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue生命周期详解

    Vue生命周期详解

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

  • Vue中的生命周期介绍

    Vue中的生命周期介绍

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

  • Vue 全部生命周期组件梳理整理

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

  • Vue3生命周期Hooks原理与调度器Scheduler关系

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

  • 详解Vue生命周期和MVVM框架

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

  • 带你一文了解Vue生命周期钩子

    带你一文了解Vue生命周期钩子

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

  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

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

  • vue生命周期beforeDestroy和destroyed调用方式

    vue生命周期beforeDestroy和destroyed调用方式

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

  • vue2与vue3中生命周期执行顺序的区别说明

    vue2与vue3中生命周期执行顺序的区别说明

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

  • VUE生命周期全面系统详解

    VUE生命周期全面系统详解

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

  • Vue 生命周期和数据共享详解

    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的生命周期图文案例详解

    Java Spring循环依赖原理与bean的生命周期图文案例详解

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

  • Vue3生命周期钩子函数详解

    Vue3生命周期钩子函数详解

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

  • vue生命周期的探索

    vue生命周期的探索

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

  • Vue生命周期区别详解

    Vue生命周期区别详解

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

  • Vue生命周期函数调用详解

    Vue生命周期函数调用详解

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

随机推荐