详细聊聊Vue生命周期的那些事

2024-12-01 05:09:12

前言

如今学习Vue的人越来越多了，Vue框架或React框架的学习也成为开发了前端开发人员的必备技能，今天我们就来聊聊Vue中的生命周期函数，Vue中生命周期函数的参考价值很高，让我们来一起认识它吧~

一、Vue2中的生命周期

实例的生命周期

在介绍生命周期之前，我们需要知道在Vue中要渲染一块页面内容的时候，会有下面这几个过程：

解析语法生成 AST。
根据 AST 结果，完成 data 数据初始化。
根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。
将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。

当我们绑定的数据进行更新的时候，又会产生以下这些过程：

框架接收到数据变更的事件，根据数据生成新的虚拟 DOM 树。比较新旧两棵虚拟 DOM 树，得到差异。
把差异应用到真正的 DOM 树上，即根据差异来更新页面内容。

当我们清空页面内容时，还有：

注销实例，清空页面内容，移除绑定事件、监听器等。

Vue为实例提供的生命周期函数一共有8个：

beforeCreate(): 初始化实例前，data、methods等不可获取——1之后，2之前
created():实例化初始化完成，此时可获取data里数据和methods事件——2之后，3之前
beforeMount():虚拟DOM创建完成，此时未挂载到页面中，vm.$el可获取未挂载模板——3之后，4之前
mounted():数据绑定完成，真实DOM已挂载到页面，vm.$el可获取真实DOM——4之后
beforeUpdate():数据更新，DOM Diff得到差异，未更新到页面——5之后，6之前
updated():数据更新，页面也已更新——6之后
beforeDestroy():实例销毁前——7之前
destroyed():实例销毁完成——7之后

关于实例的生命周期，大家还可以参考官方的图例

其它生命周期钩子

其它的生命周期函数还有activated(), deactivated(), errorCaptured()

keep-alive独有的生命周期分别为activated和deactivated。

用keep-alive包裹的组件在切换时不会进行销毁，而是缓存在内存中并执行deactived钩子函数，命中缓存渲染后会执行activated钩子函数

errorCaptured()钩子当在子组件内捕获到错误时会调用这个钩子函数。

二、Vue3中的生命周期

Vue3中的生命周期在使用Options API和Composition API会有所不同。

Options API生命周期

beforeDestroy改为beforeUnmount
destroyed改为unmounted

尤大大为什么要把他改成这样，他的回复是这很大程度上是为了更好的命名约定，对应的中文正是卸载组件和前面的挂载组件契合不少。

其它沿用Vue2生命周期

Composition API生命周期

在Composition API中使用钩子函数，我们只需要在钩子函数前面添加“on”,并在setup函数内部即可,它就会变成这样👇

我们只需要引入这些钩子函数就可以使用啦

Vue3的钩子函数如下：

onBeforemount()
onMounted()
onBeforeUpdate()
onUpdated()
onBeforeUnmount()
onUnmounted()
onActivated()
onDeactivated()
onErrorCaptured()

如果你注意观察，你会发现两个生命周期函数消失了，beforeCreate()和created()不会出现在Composition API中，我们有setup()方法即可，setup()方法出现在beforeCreate()和created()之间。

两个新的Vue3生命周期函数

onRenderTracked()：第一次在render函数中访问反应性依赖项时，将调用此函数，当我们想查看正在跟踪哪些依赖项时，钩子很有用，对调式很有作用。
onRenderTriggered():当触发新渲染时，将调用此选项，允许检查哪个依赖项触发了要重新渲染的组件。

最后

⚽这篇文章主要介绍了Vue中的生命周期函数，相信你一定有所收获~

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

Vue.js实例方法之生命周期详解

本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍: 一.$mount()挂载方法 $mount是用来挂载扩张的.如果 Vue 实例在实例化时没有收到 el 选项,则它处于"未挂载"状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例. <div id="#ap
Vue.js每天必学之构造器与生命周期

构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例: var vm = new Vue({ // 选项 }) 一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名. 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项.全部的选项可以在 API 文档中查看. 可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器: var MyC
详解Vue生命周期的示例

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &
详解Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项需要注意的
Vue js 的生命周期（看了就懂）(推荐)

用Vue框架,熟悉它的生命周期可以让开发更好的进行. 首先先看看官网的图,详细的给出了vue的生命周期: 它可以总共分为8个阶段: beforeCreate(创建前), created(创建后), beforeMount(载入前), mounted(载入后), beforeUpdate(更新前), updated(更新后), beforeDestroy(销毁前), destroyed(销毁后) 然后用一个实例的demo 来演示一下具体的效果: <div id=app>{{a}}</div
深入理解Vue生命周期、手动挂载及挂载子组件

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

这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇
vue组件生命周期详解

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

首先看看Vue文档里关于实例生命周期的解释图那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========&q
详细聊聊Vue生命周期的那些事

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

目录 vue生命周期钩子函数以下为详解版生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro
对vue生命周期的深入理解

一.Vue生命周期简介官网:https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程,就是生命周期.详细来说也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 首先我们来看一下官网的生命周期图(我自己做了一点点注释): Vue提供给我们的钩子为上图的红色的文字二.钩子详解 1.beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置
Vue生命周期介绍和钩子函数详解

目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关总结 Vue生命周期介绍和钩子函数组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do
vue生命周期与钩子函数简单示例

本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://
vue生命周期和react生命周期对比【推荐】

个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h
vue生命周期的探索

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