vue 选项/生命周期钩子 详解

通俗地讲,生命周期即Vue实例或组件从创建到被消灭的一系列过程,中间的各个节点被称为钩子.例如:vue.js中created方法是一个生命周期钩子函数,每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。例如:一般可以在created函数中调用ajax获取页面初始化所需的数据。

常用的两个钩子

created:已创建,在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:已挂载,在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些操作。

钩子的初次描述

beforeCreate阶段是组件实例化的早期阶段,此时尚未挂载到DOM,因此无法获取DOM节点,也无法获取数据和方法。created阶段,组件实例已经初始化了数据和方法,可以访问和操作组件的数据和方法,但仍无法获取DOM节点。beforeMount和mounted阶段是组件挂载到DOM的过程,此时可以获取DOM节点,也可以访问和操作组件的数据和方法。beforeUpdate和updated阶段是在组件更新过程中调用,可以获取更新后的DOM节点,也可以访问和操作组件的数据和方法。beforeDestroy和destroyed阶段是在组件销毁过程中调用,此时可以访问和操作组件的数据和方法,但无法获取DOM节点。请注意,在beforeCreate和destroyed阶段,尽管无法直接获取DOM节点,但可以通过其他方式访问和操作DOM,例如使用原生JavaScript方法或第三方库。这些钩子函数提供了在组件生命周期不同阶段执行代码的机会,可以根据需要在相应的钩子函数中进行相应的操作。

钩子的深度详解

Vue的生命周期包含了一系列的钩子函数,通过这些钩子函数,我们可以在不同的阶段执行一些特定的操作。下面详细介绍每个生命周期阶段及其对应的钩子函数的作用:

1、beforeCreate阶段对浏览器来说,整个渲染流程尚未开始或者说准备开始,对vue来说,实例尚未被初始化,data observer和 event/watcher也还未被调用,在此阶段,对data、methods或文档节点的调用现在无法得到正确的数据。在实例创建之前被调用,此时实例的data和methods等属性还未初始化,无法访问。2、created阶段对浏览器来说,渲染整个HTML文档时,dom节点、css规则树与js文件被解析后,但是没有进入被浏览器render过程,上述资源是尚未挂载在页面上,也就是在vue生命周期中对应的created阶段,实例已经被初始化,但是还没有挂载至 $el上,所以我们无法获取到对应的节点,但是此时我们是可以获取到vue中data与methods中的数据的。在实例创建完成后被调用,此时实例的data和methods等属性已经初始化完成,可以访问。通常在这个阶段可以进行一些数据的初始化、请求数据等操作。3、beforeMount阶段实际上与created阶段类似,节点尚未挂载,但是依旧可以获取到data与methods中的数据。在实例挂载到DOM之前被调用,此时模板编译成了render函数。在这个阶段中,可以访问到编译好的模板,并可以在这里进行一些DOM操作。4、mounted阶段对浏览器来说,已经完成了dom与css规则树的render,并完成对render tree进行了布局,而浏览器收到这一指令,调用渲染器的paint()在屏幕上显示,而对于vue来说,在mounted阶段,vue的template成功挂载在$el中,此时一个完整的页面已经能够显示在浏览器中,所以在这个阶段,即可以调用节点了(关于这一点,在笔者测试中,在mounted方法中打断点然后run,依旧能够在浏览器中看到整体的页面)。在实例挂载到DOM上后被调用,此时实例已经可以在DOM中进行操作了。在这个阶段可以进行一些需要DOM的操作,例如获取DOM元素、与第三方库交互等。5、beforeUpdate阶段在响应式数据更新之前被调用,此时数据已经发生变化,但尚未重新渲染到DOM上。可以在这个阶段进行一些更新前的操作,例如修改数据、计算属性等。6、updated阶段在实例更新完成后被调用,此时实例的数据已经重新渲染到DOM上。可以在这个阶段对DOM进行操作,但要避免无限循环的更新。7、beforeDestroy阶段在实例销毁之前被调用,此时实例还未销毁,可以执行一些清理工作,例如取消定时器、解绑事件监听等。8、destroyed阶段在实例销毁完成后被调用,此时实例已经销毁,相关的事件监听和定时器等也都已经被清除。在这个阶段可以进行一些销毁后的清理工作。这些生命周期钩子函数可以在组件中使用,以执行一些特定的操作,例如在created阶段请求数据并将其保存在data属性中,在mounted阶段操作DOM元素,等等。通过合理利用这些钩子函数,可以更好地控制组件的初始化、更新和销毁过程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/726216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java多线程——对象的原子更新

目录 引出对象原子更新AtomicReferenceAtomicLongFieldUpdaterABA问题 Redis冲冲冲——缓存三兄弟:缓存击穿、穿透、雪崩缓存击穿缓存穿透缓存雪崩 总结 引出 Java多线程——对象的原子更新 对象原子更新 AtomicReference package cn.test3; import lombok.AllAr…

springboot之mybaitsPlus

mybaitsPlus是国内开发的,并不是springboot的项目,只是学习的时候直接就是适配的springboot。 MyBatis-Plus (opens new window)(简称 MP)是一个 MyBatis (opens new window)的增强工具,在 MyBatis 的基础上只做增强不…

[ubuntu]ubuntu终端代理和清除终端代理命令

ubuntu设置终端代理和清除代理命令 1、添加代理 export http_proxyhttp://proxyAddress:port export https_proxyhttp://proxyAddress:port 2、查看代理 env |grep -i proxy 3、清除代理 unset http_proxy unset https_proxy 4、通过图形界面设置的代理清除 改3个文件 sudo…

linuxOPS基础_操作系统概述

计算机发展史 第一台计算机是1946 年2 月14 日诞生日,第一台名称ENIAC。体积一间屋子的大小,重量高达28t。 第一代:1946 – 1958 > 12 年 (电子管) 第二代:1958 – 1964 > 6 年 (晶体管…

vue实现虚拟键盘

本文介绍一体机常用的虚拟键盘实现,主打一个免费文章。喜欢就点个赞支持一下吧 simple-keyboard官网:simple-keyboard - simple-keyboard - Francisco HodgeSimple-keyboard is a virtual keyboard for Javascript. You can use it as an input for dev…

请你简单说一下 Mysql 的事务隔离级别

什么情况,写了 5 年的 CRUD,还搞不清楚 Mysql 的事务隔离级别,难怪第一面就被刷下来。 一个 5 年经验的粉丝,在一个公司干了 5 年,觉得自己特厉害,什么都能搞定,结果每次一到技术面就被刷。问我…

算法训练营day42(补),动态规划10

func max(a, b int) int { if a > b { return a } return b } //121. 买卖股票的最佳时机 func maxProfit1(prices []int) int { n : len(prices) dp : make([][]int, n) for i : 0; i < n; i { dp[i] make([]int, 2) } dp[0][0] -prices[0] dp[0][1] 0 for i : 1;…

使用php编写代码实现伪协议包含和日志文件包含

伪协议包含是指利用php的include函数或者require函数来加载远程资源或者本地文件&#xff0c;通过伪协议的形式来指定文件路径。日志文件包含是指通过修改php的日志文件路径来实现包含恶意代码。 下面是一个使用php实现伪协议包含和日志文件包含的简单示例&#xff1a; 伪协议…

【项目】图书管理系统

目录 前言&#xff1a; 项目要求&#xff1a; 知识储备&#xff1a; 代码实现&#xff1a; Main&#xff1a; Books包&#xff1a; Book&#xff1a; BookList&#xff1a; Operate包&#xff1a; Operate: addOperate: deleteOperate: exitOperate: findOperate:…

Redis(十七)分布式锁

文章目录 面试题分布式锁锁的种类分布式锁需要具备的条件和刚需分布式锁 案例nginx分布式微服务部署&#xff0c;单机锁问题分布式锁注意事项lock/unlocklua脚本自研版的redis分布式锁搞定lua脚本 可重入锁可重入锁种类可重入锁hset实现&#xff0c;对比setnx&#xff08;重要&…

16-Java命令模式 ( Command Pattern )

Java命令模式 摘要实现范例 命令模式&#xff08;Command Pattern&#xff09;中请求以命令的形式包裹在对象中&#xff0c;并传给调用对象 调用对象寻找可以处理该命令的合适的对象&#xff0c;并把该命令传给相应的对象&#xff0c;该对象执行命令 命令模式是行为型模式&…

Clion调试QT程序qDebug()、cout控制台无输出的可能解决方法

qDebug()不输出 在当前项目配置中添加一个环境变量 方法一、单独为配置 QT_ASSUME_STDERR_HAS_CONSOLE1 方法二、全局配置&#xff08;系统变量&#xff09; 一劳永逸 效果 cout不输出 Clion在debug调试C/C的时候&#xff0c;printf/cout不会实时输出情况 结果同上~ 谢阅…

SDM450核心板_高通SDM450安卓核心板模块性能参数

高通SDM450核心板是基于SDM450移动平台开发的一款高性能核心板。采用领先的14纳米技术&#xff0c;该核心板为高端智能设备提供了卓越的性能和优质的体验。板载2GB16GB的内存(可选配4GB32GB)&#xff0c;双 ISP(图像传感器处理器)支持丰富的照片细节和双摄像头体验&#xff0c;…

30天自制操作系统(第28天)

28.1 alloca __alloca 会在下述情况下被 C 语言的程序调用&#xff08;采用 near-CALL 的方式&#xff09;。 1、要执行的操作从栈中分配 EAX 个字节的内存空间&#xff08; ESP - EAX; &#xff09; 2、要遵守的规则不能改变 ECX 、 EDX 、 EBX 、 EBP 、 ESI 、 EDI的值&am…

借助 Terraform 功能协调部署 CI/CD 流水线-Part 1

在当今快节奏的开发环境中&#xff0c;实现无缝、稳健的 CI/CD 流水线对于交付高质量软件至关重要。在本文中&#xff0c;我们将向您介绍使用 Bitbucket Pipeline、ArgoCD GitOps 和 AWS EKS 设置部署的步骤&#xff0c;所有步骤都将利用 Terraform 的强大功能进行编排。在Part…

01_Maven

文章目录 Maven安装MavenMaven的工作流程配置MavenMaven的使用module和project的关系如何用Maven导包 如何用Maven进行项目构建指令介绍clean指令compile指令package指令install指令 Maven的依赖管理如何导包scope作用域依赖传递依赖冲突 使用Maven开发项目Junit如何使用Junit …

Unity类银河恶魔城学习记录8-3 P79 Blackhole details setup源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Blackhole_Skill_Controller.cs using System.Collections; using System.C…

QT学习笔记3--创建对话框

1. 对话框子类 finddialog.h #ifndef FINDDIALOG_H #define FINDDIALOG_H#include <QLabel> #include <QDialog> #include <QCheckBox> #include <QLineEdit> #include <QPushButton>#include <QHBoxLayout> #include <QVBoxLayout&g…

UnityAPI的学习——Quaternion类

Quaternion又称为四元数&#xff0c;由x、y、z和w这4个分量组成&#xff0c;属于struct类型。 在Unity中&#xff0c;用Quaternion来存储和表示对象的旋转角度。 Quaternion类实例属性 在Quaternion类中&#xff0c;涉及的实例属性主要有eulerAngles eulerAngles属性&#x…

力扣刷题Day11--21. 合并两个有序链表(js)

目录 1&#xff0c;题目 2&#xff0c;代码 2.1迭代思想 2.2递归思想 3&#xff0c;学习与总结 3.1js中的链表类 3.2递归思想 3.3提醒自己 1&#xff0c;题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 2&am…