百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue:生命周期钩子函数及顺序(vue生命周期钩子函数作用)

ztj100 2025-03-30 00:20 21 浏览 0 评论

一、vue 的钩子相关顺序

Vue实例有一个完整的生命周期,在new Vue()后,会初始化数据,如下:

//初始化的入口,各种初始化工作
initMixin(Vue);
//数据绑定的核心方法,包括常用的$watch方法
stateMixin(Vue);
//事件的核心方法,包括常用的$on,$off,$emit方法
eventsMixin(Vue);
//生命周期的核心方法
lifecycleMixin(Vue);
//渲染的核心方法,用来生成render函数以及VNode
renderMixin(Vue);

在initMixin中,可以看出,对应的周期钩子操作顺序如下:

vm._self = vm;
initLifecycle(vm);
initEvents(vm); //初始化事件
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');

故加载及销毁顺序如下:

加载页面执行步骤
1、父组件:beforeCreate -> created -> beforeMount
2、子组件:beforeCreate -> created -> beforeMount -> mounted
3、父组件:mounted
销毁组件执行步骤
1、父组件:beforeDestroy
2、子组件:beforeDestroy
3、子组件:destroyed
2、父组件:destroyed

二、vue的各个钩子能做哪些操作

beforeCreate:
在此阶段,实例刚在内存中被创建出来。此时,data的数据和methods中方法的都还没有初始化,数据和模板均获取不到
created:
在此阶段,实例已经在内存中创建完成。data 和 methods、computed都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作。此生命周期为最早可进行ajax异步数据请求的生命周期,服务端渲染也可在此进行
beforeMount:
执行到这个钩子的时候,在内存中已经编译好了模板了,相关的render函数首次被调用(虚拟DOM),但是还没有挂载到页面中,此时,页面还是旧的
mounted:
执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行,mounted只会执行一次。
beforeUpdate:
当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步,不会触发附加地重渲染过程
updated:
调用时,组件DOM已经更新,页面显示的数据和data中的数据已经保持同步了,都是最新的 。所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用
beforeDestory:
Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁,此时还是可以访问实例的属性

另外两个:
activated
  keep-alive组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
deactivated
  keep-alive组件停用时调用。
  该钩子在服务端渲染期间不被调用。
activated()和deactivated()只有在包裹的时候才有效;

相关推荐

Java 8 新特性全面解读:解锁现代编程的魅力

Java8新特性全面解读:解锁现代编程的魅力Java8作为Java语言发展史上里程碑式的版本,不仅带来了诸多新特性,更深刻地改变了我们编写代码的方式。无论是简洁的Lambda表达式,还是强大的S...

教程:克隆公司饭卡 然后优雅地“蹭饭”

最近借了Proxmark3来娱乐性的玩下RFID技术,工资甚低的我只好拿公司饭卡实验,优雅地蹭几顿。物业大叔表打我啊!以下操作纯属学习目的,初学难免错误较多,望斧正。首先了解M1卡的结构:请参考htt...

新课标高中教材1030个短语大汇总(高中新课标英语词汇)

1.anamountof+不可数名词许多...

看完这篇文章你就懂 AQS 了(赛科龙aqs401参数详情)

前言谈到并发,我们不得不说AQS(AbstractQueuedSynchronizer),所谓的AQS即是抽象的队列式的同步器,内部定义了很多锁相关的方法,我们熟知的ReentrantLock、Ree...

Java 8新特性全面解析:开启现代化编程之旅

Java8新特性全面解析:开启现代化编程之旅Java8作为Java语言发展历程中的重要里程碑,在2014年正式发布。它的到来标志着Java从传统面向对象编程向支持函数式编程迈进的重要一步。在这一版...

Java 8新特性全面剖析:让代码更优雅、更高效

Java8新特性全面剖析:让代码更优雅、更高效Java8,作为Java语言发展史上的一座里程碑,带来了众多令人振奋的新特性。这些新特性不仅极大地提升了开发效率,还让代码变得更优雅、更简洁。今天,我...

线程安全编程方法总结(线程安全编程方法总结)

保护线程安全是多线程编程中的核心问题,关键在于控制共享资源的访问并协调线程间的执行顺序。以下是常用的基本方法及其适用场景:1.互斥锁(MutexLocks)机制:通过锁(如synchronize...

考勤数据标准化处理(考勤标准化管理制度)

经常做考勤的同学有没有遇到过这样的考勤数据呢?没错,从考勤机里导出来的,要统计那叫一个麻烦啊(有同学说可以导出txt文件,然后再处理会省事很多,有条件的小伙伴可以自己研究研究)看这表格数据其实挺规范的...

SQL语句大全,所有的SQL都在这里(sql语句百度百科)

一、基础1、说明:创建数据库CREATEDATABASEdatabase-name2、说明:删除数据库dropdatabasedbname3、说明:备份sqlserver---创建备份数...

手搓Agno智能体使用Ollama模型(ollama本地智能体)

轻量化智能体开源框架Agno有兴趣了解WhatisAgno-Agno安装python3.12...

高级排序算法之快速排序(高效排序)

前言今天继续算法学习,本次学习的是高级排序之快速排序。本文代码部分存在调用公共方法,可在文章:...

Linux cmp 命令使用详解(linux常用命令cp)

简介Linux中的...

N张图告诉你K-DB为什么能全面兼容Oracle?

不是每一款数据库都能全面兼容Oracle,就像不是所有数据库都可以被称之为K-DB。一般数据库能做到的SQL标准和函数上兼容Oracle,而K-DB则能实现更多,在数据库体系架构、集群方式、数据库对象...

12. Langchain评估与调试:用LangSmith优化模型表现

引言:从"感觉不错"到"数据说话"2025年某电商平台通过LangSmith系统化的评估优化,将客服机器人的问题解决率从68%提升至92%。本文将详解如何用...

那些有用但不为大家所熟知的 Java 特性

本文最初发表于PiotrMińkowski的个人站点Medium网站,经作者授权,由InfoQ中文站翻译分享。...

取消回复欢迎 发表评论: