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

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

ztj100 2025-03-30 00:20 5 浏览 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()只有在包裹的时候才有效;

相关推荐

你不知道的PostgreSQL数据库安装及实现跨库查询PG和Oracle

PG作为近几年最火热的关系型数据,已经被很多开发者所使用,尤其是5G网络普及完毕后,IOT和AI的应用场景下,数据的读写速度要求非常高,MYSQL已经开始不能满足高强度的数据吞吐(这里有争议,这里只是...

从小白到专家 PG技术大讲堂 - Part 3:PG建库与使用

PostgreSQL从小白到专家,是从入门逐渐能力提升的一个系列教程,内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容,希望对热爱PG、学习PG的同学们有帮助,欢迎持续关注...

最全总结,聊聊 Python 数据处理全家桶(PgSQL篇)

来源:AirPython作者:星安果1.前言大家好,我是安果!PgSQL,全称为PostgreSQL,是一款免费开源的关系型数据库相比最流行的Mysql数据库,PgSQL在可靠性、数据完整性...

Excel函数的基本知识和使用,带你迅速掌握函数,可直接套用!

文章最后有彩蛋!好礼相送!...

Excel 小计、总计公式全都能自动计算新增行,套路公式存好

很多同学会觉得Excel单个案例讲解有些碎片化,初学者未必能完全理解和掌握。不少同学都希望有一套完整的图文教学,从最基础的概念开始,一步步由简入繁、从入门到精通,系统化地讲解Excel的各个知...

Excel查找最后一条记录,3种方法,你会么?

举一个工作中的例子,左边是商品的出库记录,其中的两列数据,现在需要快速找出最后一次出库的时间1、vlookup公式因为每种商品都会有多条出库记录,所以当我们使用vlookup公式时,它只会查找匹配到第...

DeepSeek装进IDEA,全网最全操作指南一篇详解!编程效率大幅提升

在IDEA插件中搜索“通义灵码”,即可获取到AI插件:点击“Install”按钮即可快速安装:安装可能需要一点点时间,等待即可。安装成功以后,在IDEA窗口的右下角,会提示你登录“...

Excel快速合并内容并换行(excel怎么合并后换行)

#一张图记录元旦假期#...

(六)MyBatis面试通关宝典:让你在面试中脱颖而出的关键

一、MyBatis中的工作原理...

Excel数据透视表,逆透视,你会么?

举个工作中的例子来说明,老板发给你左边的表格,让你快速转换成右边的样式,如下所示:1、数据透视表正常情况下,我们都是从右边的数据明细,使用数据透视表,得到左边的结果,简单回顾一一下,我们选中数据区域,...

掌握 Excel 「删除重复项」的4种方法,少做 80%的无用功!

在Excel中,删除重复项是数据清理和整理的常见任务,有多种方法可以实现这一目标。...

一分钟教会你在Excel里面接入DeepSeek,我们一起帮哪吒逆天改命

01...

128G手机还能用两年!微信这新功能突然来了

爽啊,微信最近搞了两个实用性拉满的新功能。不知道大伙有没有碰上过这么个情况。...

Vlookup公式用法大全,建议收藏备用

上班打工人必学的VLOOKUP函数公式,花费2个小时,总结全了,一起来学1、VLOOKUP公式基本用法VLOOKUP公式有4个参数,使用用法:=VLOOKUP(查找值,查找区域,返回第几列,查找方式)...

mariadb数据库使用SQL命令操作表-增删改查

1.DML基础语法DML(DataManipulationLanguage)...

取消回复欢迎 发表评论: