vue 生命周期

什么是生命周期,有什么作用

定义:vue 实例从创建到销毁的过程,在某个特定的位置会触发一个回调函数
作用:供开发者在生命周期的特定阶段执行相关的操作

生命周期分别有几个阶段

有四个阶段,每个阶段有两个钩子,一个前一个后
创建阶段:
beforeCreate :new Vue( ) 之后执行,但所以数据都还无法访问
created: 能拿到实例数据,这里更改数据不会触发更新,可使用this.$nextTick来执行要访问DOM的操作

挂载阶段:
beforeMount :template模版导入生成虚拟DOM,更改数据不会出发更新
mounted : 真实DOM挂载完毕,可以用 $refs访问到真实DOM

更新阶段:
beforeUpdate :响应式数据发生更新,虚拟 DOM 生成,在这个阶段修改数据不会重新渲染
updated :真实DOM完成更新,这里修改数据可能会导致无限循环更新。

销毁阶段:
beforeDestroy :销毁之前,所以实例数据DOM都可以访问,做组件销毁前的收尾工作,如注销事件绑定,清除定时器,销毁大数据
destroyed:组件被销毁,DOM被移除

使用keepAlive缓存组件,组件切换会触发actived / deactived两个钩子:
actived: 相当于创建和挂载阶段
deactived: 相当于销毁阶段

生命周期执行顺序

  1. 第一次加载会执行 beforeCreate,created,beforeMount,mounted

  2. 父子组件第一次渲染执行顺序(子的渲染夹在父的beforeMountmounted之间):
    beforeCreate->父created->父beforeMount-> 子组件加载四个阶段 ->父mounted

  3. 更新子组件的数据:子beforeUpdate->子updated

  4. 更新在父组件的数据(也在子组件渲染):
    beforeUpdate-子beforeUpdate->子updated-父updated

  5. 销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

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

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

相关文章

算法通关村第四关—栈的经典算法问题(白银)

emsp;emsp;栈的经典算法问题 一、括号匹配问题 emsp;首先看题目要求,LeetCode20.给定一个只包括’(‘,)’,‘{,’,[,]的字符串s,,判断字符串是否有效。有效字符串需满足: 1.左括号…

Servlet是什么

一、Servlet是什么 1.1 Servlet Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,泛指用 Java编写的服务器端程序。在编程过程中也指一切 实现了Servlet接口的类(约定以Servlet结尾命名&#…

我爱上这38个酷炫的数据大屏(附 Python 源码)

随着大数据的发展,可视化大屏在各行各业得到越来越广泛的应用。 可视化大屏不再只是电影里奇幻的画面,而是被实实在在地应用在政府、商业、金融、制造等各个行业的业务场景中,切切实实地实现着大数据的价值。 所以本着学习的态度&#xff0…

Docker 简介及其常用命令详解

Docker 简介及其常用命令详解 Docker 自推出以来,已成为开发和运维领域的重要工具。它简化了应用的部署、测试和分发过程,使得容器化技术成为现代软件开发的标准实践。本文将为您提供Docker的基础介绍以及其常用命令的详细讲解。 什么是Docker&#xf…

win10 修改任务栏颜色 “开始菜单、任务栏和操作中心” 是灰色无法点击,一共就两步,彻底解决有图有真相。

电脑恢复了一下出厂设置、然后任务栏修改要修改一下颜色,之前会后来忘记了,擦。 查了半天文档没用,最后找到官网才算是看到问题解决办法。 问题现象: 解决办法: 往上滑、找到这里 浅色改成深色、然后就可以了,就这么简单。 w…

P1 嵌入式开发之什么是Linux应用开发

目录 前言 01 .Linux应用与裸机编程、驱动编程之间的区别 1.1裸机编程: 1.2 驱动编程 1.3应用编程 前言 🎬 个人主页:ChenPi 🐻推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ 🔥 推荐专栏2: 《Linux C应用编程&a…

Python练习题(二)

📑前言 本文主要是【Python】——Python练习题的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 🌄每日一句&am…

如何将x和y利用torch转换成小批量数据,打乱数据、标准化或者归一化?

1、如何将x和y利用torch转换成小批量数据,打乱数据、标准化或者归一化? 方法1 将数据转换为小批量数据可以使用PyTorch中的DataLoader类,该类可以自动将数据按照批次划分,并且支持对数据进行随机打乱。下面是一个示例&#xff1…

[传智杯 #5 初赛] A-莲子的软件工程学

题目背景 在宇宙射线的轰击下,莲子电脑里的一些她自己预定义的函数被损坏了。 对于一名理科生来说,各种软件在学习和研究中是非常重要的。为了尽快恢复她电脑上的软件的正常使用,她需要尽快地重新编写这么一些函数。 题目描述 具体而言&a…

CF1714C Minimum Varied Number

Minimum Varied Number 题面翻译 题目描述 找出数码和为 s s s 的最小数字,使得其中的所有数字都是不同的(即所有数字都是唯一的)。 例如,如果 s 20 s20 s20 ,那么答案是 389 389 389。这是最小的数字&#xf…

量子光学的进步:光子学的“下一件小事”

量子光学是量子力学和光学交叉领域中发展迅速的一门学科,探索光的基本特性及其与物质在量子水平上的相互作用。通过利用光的独特特性,量子光学为通信、计算、密码学和传感等各个学科的变革性进步铺平了道路。 如今,量子光学领域的研究人员和工…

C++调用GPIB驱动头文件ni488.h内容详细分拆解

ni488.h是一个C语言库文件,用于使用NI-488.2通信协议进行控制和通信,主要包括以下内容: 宏定义:定义了许多常量、变量和函数的宏,如NI488_VERSION、NI488_REN_ADDRESS、NI488_UNL_ADDRESS等。 数据类型定义&#xff1…

C++基础 -33- 单目运算符重载

单目运算符重载格式 a和a通过形参确定 data1 operator() {this->a;return *this; }data1 operator(int) {data1 temp*this;this->a;return temp; }举例使用单目运算符重载 #include "iostream"using namespace std;class data1 {public :int a;data1(int…

【技术分享】RK356X Android11 以太网共享4G网络

本文基于IDO-SBC3566-V1B Android11系统实现开机后以太网自动共享4G网络功能。 IDO-SBC3566基于瑞芯微RK3566研发的一款高性能低功耗的智能主板,采用四核A55,主频高达1.8GHz,专为个人移动互联网设备和AIOT设备而设计,内置了多种功能强大的嵌…

【开源】基于Vue+SpringBoot的服装店库存管理系统

项目编号: S 052 ,文末获取源码。 \color{red}{项目编号:S052,文末获取源码。} 项目编号:S052,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 服…

JAVA全栈开发 集合详解(day14+day15汇总)

一、数组 数组是一个容器,可以存入相同类型的多个数据元素。 数组局限性: ​ 长度固定:(添加–扩容, 删除-缩容) ​ 类型是一致的 对象数组 : int[] arr new int[5]; … Student[] arr …

Effective C++(四): 资源管理

文章目录 一、智能指针驱动的RAII二、shared_ptr 和 weak_ptr三、如何复制 RAII 对象四、在资源管理类中应该提供对原始资源的访问函数 为了防止忘记调用 delete 造成的内存泄露,我们应该尽可能让对象管理资源,并且采用 RAII 机制(Resource Acquisition …

Sql Server数据库跨机器完整恢复(源文件恢复)

问题描述 在操作系统异常的情况下,SQL Server 和相关的业务系统遭受了不可用的情况。由于操作系统问题,导致旧服务器无法正常运行。为了恢复业务功能并确保数据完整性,采取了以下步骤来在新机器上进行 SQL Server 的重新安装和数据恢复。 面…

【超全】React学习笔记 中:进阶语法与原理机制

React学习笔记 React系列笔记学习 上篇笔记地址:【超全】React学习笔记 上:基础使用与脚手架 下篇笔记地址:【超全】React学习笔记 下:路由与Redux状态管理 React进阶组件概念与使用 1. React 组件进阶导读 在掌握了 React 的基…

Verilog 入门(七)(任务、函数)

文章目录 任务任务定义任务调用 函数函数说明部分函数调用 值变转储文件 任务 一个任务就像一个过程,它可以从描述的不同位置执行共同的代码段。共同的代码段用任务定义编写成任务,这样它就能够从设计描述的不同位置通过任务调用被调用。任务可以包含时…