Vue中的生命周期钩子

生命周期钩子

:::warning 注意
所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以利用 this 访问 props、data、computed 和 methods 等选项内的数据/函数。这意味着你不应该使用箭头函数来定义一个生命周期方法,因为箭头函数中没有 this,这样会导致 this 无法指向实例中。
:::

可以理解每一个组件就是一个实例,每个实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

也就是说,当你调用 new Vue 的时候直到页面被完全渲染,这两者的过程之间 Vue 是做了很多你看不见的事情,但是在几个比较重要的阶段中加入了生命周期钩子函数。代表支持了你可以在每个阶段中去执行特定的代码。比较常用的有 8 个生命周期钩子函数。

生命周期钩子函数

beforeCreate

在实例创建之前执行。

created

在实例创建之后执行。到了这一步意味着数据侦听、计算属性、方法、侦听器的回调函数已被配置完毕。

beforeMount

在实例挂载之前执行。到了这一步意味着已经对 el、template 进行了处理,最后转成了 render 函数,在执行完当前钩子后会进行 render 函数的首次调用。render 函数里面包含了即将要被渲染的 dom 内容。

mounted

在实例挂载之后执行。到了这一步意味着实例已经挂载完成了,页面上可以呈现效果了。注意 mounted 不会保证所有的子组件也都被挂载完成,仅仅是当前组件而已。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick。

beforeUpdate

在实例更新之前执行。数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。

updated

在实例更新之后执行。在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。注意,updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick。

beforeDestroy

实例销毁之前执行。在这一步,实例仍然完全可用。

destroyed

实例销毁之后执行。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

生命周期图示

在这里插入图片描述

原文链接:菜园前端

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

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

相关文章

实时车辆行人多目标检测与跟踪系统(含UI界面,Python代码)

算法架构: 目标检测:yolov5 目标跟踪:OCSort其中, Yolov5 带有详细的训练步骤,可以根据训练文档,训练自己的数据集,及其方便。 另外后续 目标检测会添加 yolov7 、yolox,目标跟踪会…

node_modules/XXX/index.js:XXX;XX ||= XXX?.[level];SyntaxError: Une

这个语法是 ECMAScript 2021的语法 还挺新的 对node版本要求会比较高 这里这个 icon || this.options.icon?.[level];意思就是 如果this.options.icon [level] 拿得到值 就等于它 否则 如果拿不到 icon 就等于自己 要解决这个问题 一个是你可以提高node版本 但我不建议 还是…

k8s---基本架构--节点

节点 Kubernetes 中添加节点到 API 服务器的两种主要方式: 节点上的 kubelet 自动向控制平面注册。您(或其他人)手动添加一个 Node 对象。 当您创建一个 Node 对象,或者节点上的 kubelet 自动注册时,控制平面会检查…

AlexNet——训练花数据集

目录 一、网络结构 二、创新点分析 三、知识点 1. nn.ReLU(inplace) 2. os.getcwd与os.path.abspath 3. 使用torchvision下的datasets包 4. items()与dict()用法 5. json文件 6. tqdm 7. net.train()与net.val() 四、代码 AlexNet是由Alex Krizhevsky、Ilya S…

2023最全Java面试题及答案汇总

前言 面试前还是很有必要针对性的刷一些题,很多朋友的实战能力很强,但是理论比较薄弱,面试前不做准备是很吃亏的。这里整理了很多面试常考的一些面试题,希望能帮助到你面试前的复习并且找到一个好的工作,也节省你在网…

NLP技术如何为搜索引擎赋能

目录 1. NLP关键词提取与匹配在搜索引擎中的应用1. 关键词提取例子 2. 关键词匹配例子 Python实现 2. NLP语义搜索在搜索引擎中的应用1. 语义搜索的定义例子 2. 语义搜索的重要性例子 Python/PyTorch实现 3. NLP个性化搜索建议在搜索引擎中的应用1. 个性化搜索建议的定义例子 2…

Java:JSR 310日期时间体系LocalDateTime、OffsetDateTime、ZonedDateTime

JSR 310日期时间体系: LocalDateTime:本地日期时间OffsetDateTime:带偏移量的日期时间ZonedDateTime:带时区的日期时间 目录 构造计算格式化参考文章 日期时间包 import java.time.LocalDateTime; import java.time.OffsetDateT…

Stable Diffusion WebUI 使用

想要正常运行 Stable Diffusion WebUI 需要机器上有 Nvidia 显卡才行, 简单体验可以 RTX 3070 起步, 正常玩需要 RTX 3080 起步, 要训练模型就要 RTX 3090 起步。 修改配置 通常 Stable Diffusion WebUI 的配置信息写在 stable-diffusion-webui/webui-user.sh 文件中: $ cd …

Eclipse如何打开debug变量窗口

今天笔者在使用Eclipse调试的时候,发现没有变量(Variables)监视窗口,真是头痛得很,最后摸索出一套显示变量窗口的操作如下: 点击other,找到Variables并点击 最后调试代码,调试后如图…

机器学习(17)---支持向量机(SVM)

支持向量机 一、概述1.1 介绍1.2 工作原理1.3 三层理解 二、sklearn.svm.SVC2.1 查看数据集2.2 contour函数2.3 画决策边界:制作网格2.4 建模画图 三、非线性情况推广3.1 查看数据集3.2 线性画图3.3 为非线性数据增加维度并绘制3D图像 四、核函数 一、概述 1.1 介绍…

免杀对抗-Python-混淆算法+反序列化-打包生成器-Pyinstall

Python-MSF/CS生成shellcode-上线 cs上线 1.生成shellcode-c或者python 2.打开pycharm工具,创建一个py文件,将原生态执行代码复制进去 shellcode执行代码: import ctypesfrom django.contrib.gis import ptr#cs#shellcodebytearray(b"生…

Java skill - 服务同时开始https和http端口

Java skill - 服务同时开始https和http端口 添加ssl配置代码开启http端口讲解大坑 添加ssl配置 在配置文件中添加配置 server:# ssl证书配置ssl:# 双向证书配置# 证书文件路径key-store: /opt/ops/cert/xes.p12# 证书密码key-store-password: 123456# 证书类型key-store-type…

IMX6ULL移植篇-Linux内核源码目录分析一

一. Linux内核源码目录 之前文章对 Linux内核源码的文件做了大体的了解,如下: IMX6ULL移植篇-Linux内核源码文件表_凌肖战的博客-CSDN博客 本文具体说明 Linux内核源码的一些重要文件含义。 二. Linux内核源码中重要文件分析 1. arch 目录 这个目录…

用了 TCP 协议,就一定不会丢包吗?

表面上我是个技术博主。 但没想到今天成了个情感博主。 我是没想到有一天,我会通过技术知识,来挽救粉丝即将破碎的感情。 掏心窝子的说。这件事情多少是沾点功德无量了。 事情是这样的。 最近就有个读者加了我的绿皮聊天软件,女生&#xff0c…

01强化学习的数学原理:大纲

01强化学习学习路线大纲 前言强化学习脉络图章节介绍Chapter 1:Basic ConceptsChapter 2:Bellman EquationChapter 3:Bellman Optimality EquationChapter 4:Value Iteration / Policy IterationChapter 5:Monte Carlo…

华为OD机试 - 靠谱的车 - 逻辑分析(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷&#…

JOSEF约瑟 智能电流继电器KWJL-20/L KWLD26 零序孔径45mm 柜内导轨式安装

KWJL-20智能电流继电器 零序互感器: KWLD80 KWLD45 KWLD26 KWJL-20 一、产品概述 KWJL-20系列智能剩余电流继电器(以下简称继电器)适用于交流电压至660V或更高的TN、TT、和IT系统,频率为50Hz。通过零序电流互感器检测出超过…

qt qml RadioButton如何设置字体颜色,style提示找不到怎么办?

qt QML中设置RadioButton的字体颜色,可以使用RadioButton的label属性来设置文本的样式。下面是一个示例代码: import QtQuick 2.6 import QtQuick.Controls 2.2 import QtQuick.Controls 1.4 as Controls1_4 import QtQuick.Controls.Styles 1.4 import…

如何使用Python和Numpy实现简单的2D FDTD仿真:详细指南与完整代码示例

第一部分:引言及FDTD简介 引言: 计算机模拟在许多科学和工程领域中都得到了广泛应用。在电磁学领域,有许多不同的数值方法用于模拟波的传播和散射。其中最为知名和广泛使用的一种方法是有限差分时域方法(Finite Difference Time Domain, FDTD)。在这篇…

IOTE 2023国际物联网展直击:芯与物发布全新定位芯片,助力多领域智能化发展

IOTE 2023国际物联网展,作为全球物联网领域的盛会,于9月20日在中国深圳拉开帷幕。北斗星通集团应邀参展,旗下专业从事物联网、消费类GNSS芯片研发设计的芯与物公司也随其亮相本届盛会。 展会上,芯与物展示了一系列创新的GNSS定位…