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

2024-12-01 14:31:07

created：在创建之后使用；
beforeMount：挂载数据到DOM之前会调用
mounted：挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM
beforeUpdate：在更新DOM之前调用该钩子应用:可以获取原始的DOM
updated：在更新DOM之后调用该钩子应用:可以获取最新的DOM
beforeDestroy：
destroyed：
activated：用于组件激活的功能
deactivated：用于组件被停用

前言

今天继续加油学习，今天整理一下VUE中生命周期那有些，平且依次说明给个的使用场景以及作用。嘻嘻嘻，让我们一起学起来好吧

生命周期

beforeCreate： 在创建组件之前使用；在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

beforeCreate:function(){
				//组件创建之前
				console.log(this)
			}

created：在创建之后使用；

使用该组件,就会调用created方法,在created这个方法中可以操作后端的数据数据驱动视图；

应用:发送ajax请求

  created:function(){
  			console.log(this.msg)
  		},

beforeMount：挂载数据到DOM之前会调用

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

该钩子在服务器端渲染期间不被调用。

         beforeMount:function(){
 			console.log(document.getElementById('app'));
 		},

mounted：挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

mounted:function(){
		console.log(document.getElementById('app'));
		},

beforeUpdate：在更新DOM之前调用该钩子应用:可以获取原始的DOM

在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。

beforeUpdate:function(){
			//在更新DOM之前 调用该钩子 应用:可以获取原始的DOM
			 console.log(document.getElementById('app').innerHTML);
		},

updated：在更新DOM之后调用该钩子应用:可以获取最新的DOM

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。

     updated:function(){
  	 console.log(document.getElementById('app').innerHTML);
  		},

beforeDestroy：

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

beforeDestroy:function(){
				console.log('beforeDestroy')
			},

destroyed：

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

destroyed:function(){
			   console.log('destroyed')
			},

activated：用于组件激活的功能

	activated:function(){
			   console.log('组件被激活了')
			},

deactivated：用于组件被停用

deactivated:function(){
			   console.log('组件被停用了')
			}

到此这篇关于Vue 全部生命周期组件梳理整理的文章就介绍到这了,更多相关Vue 生命周期组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue同步父子组件和异步父子组件的生命周期顺序问题

关于vue组件的引入方式有两种一. 同步引入例子: import Page from '@/components/page' 二.异步引入例子:const Page = () => import('@/components/page') 或者: const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于: 同步引入时生命周期顺序为:父组件的beforeMount.created.beforeMoun
vue组件生命周期详解

本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据做逻辑判断 destroy:beforeDestroy destroyed 清理工作代码: <!do
vue组件生命周期钩子使用示例详解

目录组件生命周期图组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图组件生命周期钩子所有的生命周期钩子自动绑定一.组件的生命周期:一个组件从创建到销毁的整个过程二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
Vue生命周期中的组件化你知道吗

目录引出生命周期销毁流程生命周期生命周期总结组件化非单文件组件组件的几个注意点组件的嵌套 VueComponent Vue实例与组件实例总结引出生命周期此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change. 销毁流程解绑(自定义)事件监听器生命周期生命周期总结 <div id="root"> <!-- <h2 :style="{opacity}">hello,{{n
深入理解Vue生命周期、手动挂载及挂载子组件

本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip
深入理解Vue父子组件生命周期执行顺序及钩子函数

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子生命周期钩子详细 beforeCreate 在实例
Vue组件生命周期运行原理解析

Vue实例有一个完整的生命周期,从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据. created ( 创建后 ) 实例已经创建完成之后被调用,在这一步,实例已完成以
Vue父组件监听子组件生命周期

比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示: //
Vue组件和Route的生命周期实例详解

先讲点实际的实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat
Vue 全部生命周期组件梳理整理

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

目录 vue的生命周期钩子的介绍父子组件的生命周期加载渲染过程父组件更新过程子组件更新过程父子组件更新过程销毁过程代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom
基于Vue实例生命周期(全面解析)

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期图示下图是Vue实例生命周期的图示解释接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即
Vue 中生命周期定义及流程

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

本文实例讲述了Vue的生命周期操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的生命周期</title> <script type="text/javascript" src="https://cdn.bootcss.com
一文搞懂Vue八大生命周期钩子函数

目录一.速识概念: 二.八大生命周期钩子函数: 三.结合代码了解: 1. beforeCreate: 2.created: 3.beforeMount: 4.mounted: 5.beforeUpdate: 6.updated: 7.beforeDestroy: 8.destroyed: 一.速识概念: 我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期.而生命周期函数,就是在某个时刻会自动执行的函数. 按照官方的原话,就是每个 Vue 实例在被创建时都要经过一
浅谈VUE uni-app 生命周期

目录一.应用的生命周期二.页面生命周期三.组件生命周期总结一.应用的生命周期 onLaunch 当uni-app 初始化完成时触发(全局只触发一次)onShow 当 uni-app 启动,或从后台进入前台显示onHide 当 uni-app 从前台进入后台二.页面生命周期 onLoad 监听页面加载onReady 监听页面初次渲染完成.注意如果渲染速度快,会在页面进入动画完成前触发onShow 监听页面显示.页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面onHide 监
浅谈vue的生命周期

目录 1.什么是生命周期?有什么作用? 2.第一次加载页面会触发哪几个钩子? 3.简述每个周期应用于哪个场景? 4.created和mounted的区别 5.vue在哪个生命周期获取数据? 总结 1.什么是生命周期?有什么作用? 每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想
老生常谈vue的生命周期

目录一.什么是生命周期二.生命周期函数三.生命周期的流程四.简单的生命周期代码总结一.什么是生命周期每一个组件都可能经历从创建,挂载,更新,卸载的过程. 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的逻辑代码(比如组件创建完后就请求一些服务器数据) 但是我们如何知道目前组件正在哪一个过程中,vue给我们提供了组件的生命周期函数. 二.生命周期函数生命周期函数是一个钩子函数,在某一个时间会被vue内部源码进行回调. 通过对生命周期函数的回调,我们知道目前组件正在经历什么
一起来学习Vue的生命周期

目录生命周期生命周期的简单介绍 beforeCreate与created beforeCreate() created() beforeMount与mounted beforeMount() mounted()(重要) beforeUpdate与updated beforeUpdate() updated() beforeDestroy与destroyed beforeDestroy()(重要) destroyed() 总结生命周期生命周期的简单介绍 1.生命周期又叫做:生命周期回调函数