一起来学习Vue的生命周期

2024-12-23 22:29:51

生命周期

生命周期的简单介绍

1.生命周期又叫做：生命周期回调函数、生命周期函数、生命周期钩子。

2.生命周期是：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。

在Vue官网教学中，Vue实例=>实例生命周期钩子中列举了8个生命周期函数

分别是：

1.beforeCreate()

2.created()

3.beforeMount()

4.mounted()（重点）

5.beforeUpdate()

6.updated()

7.beforeDestroy() （重点）

8.destroyed()

这八个生命周期函数涵盖了Vue实例从创建到销毁的过程即创建之前、创建完成、挂载之前、挂载完成、更新之前、更新完成、销毁之前、销毁完成。

beforeCreate与created

beforeCreate（）

当使用 beforeCreate时，由于还没完成创建，因此无法通过vm访问到data中的数据、methods中的方法。

created（）

当使用 created时，由于已经完成了创建，因此可以通过vm访问到data中的数据、methods中的方法。

beforeMount与mounted

beforeMount（）

当使用 beforeMount时，由于还未完成挂载，因此此时页面呈现的内容都是未经Vue编译的DOM结构，并且在此时对DOM的所有操作最终都不奏效。不奏效的原因是当运行到mounted时，系统会将内存中的虚拟DOM转为真实DOM插入页面，因此修改的内容会被覆盖。

mounted（）（重要）

当使用mounted时，此时已经完成挂载，页面呈现的内容会变成经过Vue编译的DOM，同时此时对DOM的操作均有效。当运行到这时，初始化的过程就结束了。一般在此进行如下操作：开启定时器、发送网络请求、订阅消息等初始化操作。

beforeUpdate与updated

数据发生变化时，会使用beforeUpdate与updated进行更新

beforeUpdate（）

当使用beforeUpdate时，此时还未更新完毕，数据已经成功获取，但是还未展示到页面中。因此会存在以下现象，数据是新数据但是页面中显示的是旧数据。此时页面与数据尚未保持同步。

updated（）

当使用updated时，此时已经更新完毕。这时候数据是新数据，页面中显示的也是新数据。此时页面与数据保持同步。

beforeDestroy与destroyed

当Vue实例要销毁的时候，会使用beforeDestroy与destroyed进行销毁

beforeDestroy（）（重要）

当使用beforeDestroy时，此时Vue实例还未完全销毁，vm中的 data、methods、指令等还都处于可用状态。但此时修改数据已经不会对页面进行更新。通常在此阶段进行关闭定时器、取消订阅信息、解绑自定义事件等操作。在这8个生命周期函数中，beforeDestroy与mounted使用较多。

destroyed（）

当使用destroyed时，Vue实例彻底销毁。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

Vue3生命周期钩子函数详解

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

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

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

目录为什么要理解生命周期什么是生命周期生命周期钩子函数 created和mounted 钩子的一些实战用法 1.异步函数 2.Vue.nextTick对异步函数的结果进行操作总结为什么要理解生命周期用Vue框架,熟悉它的生命周期可以让开发更好的进行. 如果只是单纯地知道vue里面的简单语法,你是可以实现对应的一些项目和对应的想法,但是如果一旦发生问题,我们就需要借助生命周期去寻找问题,甚至说有一些需求的话,你也通过生命周期的情况来定我们该把这个东西写在哪里.所以理解vue的生命周期还
深入了解vue2与vue3的生命周期对比

目录周期对比用法总结周期对比 vue2 vue3 beforeCreate setup created setup beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated activeted onActiveted deactiveted onDeactiveted beforeDestory onBeforeUnmount destoryed onUnmounte
详细聊聊Vue生命周期的那些事

目录前言一.Vue2中的生命周期实例的生命周期其它生命周期钩子二.Vue3中的生命周期 Options API生命周期 Composition API生命周期两个新的Vue3生命周期函数最后前言如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~ 一.Vue2中的生命周期实例的生命周期在介绍生命周期之前,我们需要知道在Vue中要渲染
一起来学习Vue的生命周期

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

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

目录组件生命周期创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段运行阶段 beforeUpdate阶段 updated阶段销毁阶段 beforeDestroy阶段 destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before
基于Vue实例生命周期(全面解析)

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期图示下图是Vue实例生命周期的图示解释接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即
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.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图组件生命周期钩子所有的生命周期钩子自动绑定一.组件的生命周期:一个组件从创建到销毁的整个过程二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
vue的生命周期钩子与父子组件的生命周期详解

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

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