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

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

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

相关推荐

30天学会Python编程:16. Python常用标准库使用教程

16.1collections模块16.1.1高级数据结构16.1.2示例...

强烈推荐!Python 这个宝藏库 re 正则匹配

Python的re模块(RegularExpression正则表达式)提供各种正则表达式的匹配操作。...

Python爬虫中正则表达式的用法,只讲如何应用,不讲原理

Python爬虫:正则的用法(非原理)。大家好,这节课给大家讲正则的实际用法,不讲原理,通俗易懂的讲如何用正则抓取内容。·导入re库,这里是需要从html这段字符串中提取出中间的那几个文字。实例一个对...

Python数据分析实战-正则提取文本的URL网址和邮箱(源码和效果)

实现功能:Python数据分析实战-利用正则表达式提取文本中的URL网址和邮箱...

python爬虫教程之爬取当当网 Top 500 本五星好评书籍

我们使用requests和re来写一个爬虫作为一个爱看书的你(说的跟真的似的)怎么能发现好书呢?所以我们爬取当当网的前500本好五星评书籍怎么样?ok接下来就是学习python的正确姿...

深入理解re模块:Python中的正则表达式神器解析

在Python中,"re"是一个强大的模块,用于处理正则表达式(regularexpressions)。正则表达式是一种强大的文本模式匹配工具,用于在字符串中查找、替换或提取特定模式...

如何使用正则表达式和 Python 匹配不以模式开头的字符串

需要在Python中使用正则表达式来匹配不以给定模式开头的字符串吗?如果是这样,你可以使用下面的语法来查找所有的字符串,除了那些不以https开始的字符串。r"^(?!https).*&...

先Mark后用!8分钟读懂 Python 性能优化

从本文总结了Python开发时,遇到的性能优化问题的定位和解决。概述:性能优化的原则——优化需要优化的部分。性能优化的一般步骤:首先,让你的程序跑起来结果一切正常。然后,运行这个结果正常的代码,看看它...

Python“三步”即可爬取,毋庸置疑

声明:本实例仅供学习,切忌遵守robots协议,请不要使用多线程等方式频繁访问网站。#第一步导入模块importreimportrequests#第二步获取你想爬取的网页地址,发送请求,获取网页内...

简单学Python——re库(正则表达式)2(split、findall、和sub)

1、split():分割字符串,返回列表语法:re.split('分隔符','目标字符串')例如:importrere.split(',','...

Lavazza拉瓦萨再度牵手上海大师赛

阅读此文前,麻烦您点击一下“关注”,方便您进行讨论和分享。Lavazza拉瓦萨再度牵手上海大师赛标题:2024上海大师赛:网球与咖啡的浪漫邂逅在2024年的上海劳力士大师赛上,拉瓦萨咖啡再次成为官...

ArkUI-X构建Android平台AAR及使用

本教程主要讲述如何利用ArkUI-XSDK完成AndroidAAR开发,实现基于ArkTS的声明式开发范式在android平台显示。包括:1.跨平台Library工程开发介绍...

Deepseek写歌详细教程(怎样用deepseek写歌功能)

以下为结合DeepSeek及相关工具实现AI写歌的详细教程,涵盖作词、作曲、演唱全流程:一、核心流程三步法1.AI生成歌词-打开DeepSeek(网页/APP/API),使用结构化提示词生成歌词:...

“AI说唱解说影视”走红,“零基础入行”靠谱吗?本报记者实测

“手里翻找冻鱼,精心的布局;老漠却不言语,脸上带笑意……”《狂飙》剧情被写成歌词,再配上“科目三”背景音乐的演唱,这段1分钟30秒的视频受到了无数网友的点赞。最近一段时间随着AI技术的发展,说唱解说影...

AI音乐制作神器揭秘!3款工具让你秒变高手

在音乐创作的领域里,每个人都有一颗想要成为大师的心。但是面对复杂的乐理知识和繁复的制作过程,许多人的热情被一点点消磨。...

取消回复欢迎 发表评论: