VUE的生命周期- VUE2.x

news2024/9/30 17:32:15

1.生命周期有哪些

VUE2.x 自带八个:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed

2.一旦进入组件会执行哪些生命周期

beforeCreate,created,beforeMount,mounted

beforeCreate,没有DOM($el),没有data,不能拿到方法

created没有DOM($el),有data,可以拿到方法

beforeMount:准备DOM,有data

mounted:挂载DOM,有data

3.父组件引入子组件,生命周期的顺序是?

beforeCreate(父)-》created(父)-》beforeMount(父)-》

beforeCreate(子)-》created(子)-》beforeMount(子)-》mounted(子)-》

mounted(父)

4.发送请求是在哪个生命周期?beforeCreate为什么不发送请求?

先执行同步再执行异步,生命周期是同步的,请求是异步的,加载页面四个生命周期执行完才会执行发送请求,写在哪里都行

如果请求在methods中封装好的,在beforeCreate中拿不到

根据父组件引用子组件的顺序,如果要优先加载子组件数据,请求需要放在父组件mounted中,没有依赖关系的话,放在哪个生命周期都可以

5.在created如何获得dom

1)只要created中异步请求(请求、setTimeout,Promise.xxx,async+await)中获取dom就可以了 2)使用vue系统内置this.$nextTick $ref

6.加入keep-alive会执行哪些生命周期?

keep-alive 是什么?缓存当前组件

新增activated\deactivated

第一次进入界面五个生命周期:beforeCreate,created,beforeMount,mounted,activated

第二(N)次进入:activated

7.生命周期使用场景

1)单组件请求用created

2)同步条件下,获得DOM。选择mounted;先子组件请求,后父组件请求,其他区情况具体分析;

3)keep-alive时,使用activated,如果页面id不同,在这里重新发送请求

4)关闭页面记录视频播放历史,初始化的时候从上一次播放历史播放

从网上找个图

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

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

相关文章

飞桨-鹏城云脑发行版亮相第四届启智开发者大会,软硬一体化助力科研

2月24日,主题为“算网筑基、开源启智、AI赋能”的第四届OpenI/O启智开发者大会在深圳开幕,大会由科技部指导、鹏城实验室与新⼀代人工智能产业技术创新战略联盟(AITISA)主办,科技部高新司副司长梅建平,中国…

Simple RNN、LSTM、GRU序列模型原理

一。循环神经网络RNN 用于处理序列数据的神经网络就叫循环神经网络。序列数据说直白点就是随时间变化的数据,循环神经网络它能够根据这种数据推出下文结果。RNN是通过嵌含前一时刻的状态信息实行训练的。 RNN神经网络有3个变种,分别为Simple RNN、LSTM、…

ESP-C3入门13. SoftAP模式

ESP-C3入门13. SoftAP模式一、 ESP32-C3 WIFI的工作模式二、SoftAP配置1. wifi_config_t 结构体2. wifi_event_handler 事件(1) esp_event_handler_instance_register 注册事件(2) system_event_sta_connected_t 结构体3. 关闭SoftAP三、示例1. main.c2. wifi_ap.h3. wifi_ap.…

自动化构建部署devops(CICD)--敏捷开发

一。gitlab结合jenkins自动化项目构建部署 代替早期的手动部署服务,写文档,java-jar启动啦。麻烦还容易出错。 二。DevOps 三。部署流水线 四,页面工具(类似于ones) 1,开发组长在页面添加项目成员&#…

integrationobjects点com all OPC Crack

Integration Objects 是世界领先的系统集成商和解决方案提供商,专门从事运营和制造智能、高级分析、异常事件的预防性检测、在线诊断和根本原因分析、OPC 连接、工厂自动化、知识管理解决方案、网络安全和企业电力和公用事业以及全球流程和制造行业的集成。 OPC UA …

storybook使用info插件报错

报错内容: RangeErrorMaximum call stack size exceededCall StackprettyPrintvendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-4ff2dd.iframe.bundle.js:160:27undefinedvendors-node_modules_pmmmwh_react-refresh-webpack-…

结构方程模型全流程

案例与数据 某研究者想要研究关于教师懈怠感的课题,教师懈怠感是指教师在教育情境的要求下,由于无法有效应对工作压力与挫折而产生的情绪低落、态度消极状态,这种状态甚至会引发心理、生理的困扰,终至对教育工作产生厌倦&#xf…

英语二-议论文写作词汇、话题、模板、范文参考

1. 词汇多样性 1. 表示因果关系 2. 表示转斩关系 3. 表示顺序关系 4. 表示递进关系 5. 表示对比关系 6. 表示总结关系 7. 连接论据的词 2. 高频考试话题 1. 有益身心的短语 2. 提高能力的短语 3. 写作模板 支持原创作文,如果不会,请牢记模板。 如果嫌…

Android源码分析 —— Activity栈管理(基于Android8)

0. 写在前面 本文基于 Android8.0源码,和Android9.0大同小异,但和Android10.0差别非常大!新版改用ATM来管理Activity的启动,Activity的生命周期也通过XXXItem来管理。由于我分析的Activity启动流程就是基于Android8/9的&#xff…

FFmpeg/OpenCV 实现全屏斜体水印

实现思路 🤔​ 基于ffmpeg,画布的方式,创建画布 -> 水印 -> 旋转 -> 抠图 -> 叠加到图像上基于ffmpeg,旋转图片的方式,填充 -> 水印 -> 顺时针旋转 -> 逆时针旋转 -> 截图基于opencv&#xff…

Pag渲染过程 -- 背景知识

什么是渲染 渲染是图形程序的核心,无论是我们在电子设备上看到的任何图形或者文字都是利用计算机图形渲染技术给我们呈现出来的结果。在计算机里一开始是直接利用CPU往显示器的FrameBuffer内写入数据即可把图形展示到显示器上,但是随着用户的需求和技术…

别担心,ChatGPT还抢不动你的饭碗

前言: “你是谁?” “我是一个由OpenAI训练的大型语言模型。我旨在帮助人们解答问题和提供信息。由于我是一个计算机程序,所以不会感知或者思考,只能通过已有的数据来回答问题。如果您有任何问题,请随时告诉我。” ---…

rabbitmq部署安装(mac)

安装: // 默认已经下载了homebrew,更新brew资源 brew update // 执行安装 brew install rabbitmq 配置: // 切换到MQ目录,注意你的安装版本可能不是3.9.5(我的版本,当前最新版 cd /usr/local/Cellar/rabbitmq/3.…

如果不是互联网人,谁会找到这些神器?

一、上线啦 你肯定该问了,这个是什么鬼东西。它本来是一个创建自己网站的网站。 现在使用它可以创建自己的小程序,又不是有点小厉害了。 而且功能强大,还支持微信支付,分销,优惠券,营销等多种功能。 还有多…

DS期末复习卷(九)

一、选择题(30分) 1&#xff0e;下列程序段的时间复杂度为&#xff08;A &#xff09;。 for(i0&#xff1b; i<m&#xff1b; i) for(j0&#xff1b; j<t&#xff1b; j) c[i][j]0&#xff1b; for(i0&#xff1b; i<m&#xff1b; i) for(j0&#xff1b; j<t&am…

LeetCode:二叉树的最大深度104;559. N 叉树的最大深度

104. 二叉树的最大深度 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例&#xff1a; 给定二叉树 [3,9,20,null,null,15,7]&#xff0c; 3/ \9 20/ \15 7 返回它的…

看似平平无奇的00后,居然一跃上岸字节,表示真的卷不过......

又到了一年一度的求职旺季金&#xff01;三&#xff01;银&#xff01;四&#xff01;在找工作的时候都必须要经历面试这个环节。在这里我想分享一下自己上岸字节的面试经验&#xff0c;过程还挺曲折的&#xff0c;但是还好成功上岸了。大家可以参考一下&#xff01; 0821测评 …

变则通--通则达--MindSpore社区活动-深度学习模型之数据变换-Transforms学习与体验记录

文章目录已加入 昇思MindSpore社区 证明截图安装 MindSpore 2.0 alpha 步骤打开powershell 或 cmd安装成功的截图实现 数据变换Transforms 任务Common Transforms 通用数据变换Vision Transforms 针对图像数据的变换Text Transforms 文本数据的变换Lambda Transforms结语已加入…

Netty——序列化的作用及自定义协议

序列化的作用及自定义协议序列化的重要性大小对比效率对比自定义协议序列化数据结构自定义编码器自定义解码器安全性验证NettyClientNettyServerNettyClientTestHandlerNettyServerTestHandler结果上一章已经说了怎么解决沾包和拆包的问题&#xff0c;但是这样离一个成熟的通信…

【华为OD机试模拟题】用 C++ 实现 - 停车场最大距离(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 分积木(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 吃火锅(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - RSA 加密算法(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 构成的正方形数量(2023.Q1) 【华为OD机试模拟…