11.vue学习笔记(组件生命周期+生命周期应用+动态组件+组件保持存活)

文章目录

        • 1.组件生命周期
        • 2.生命周期应用
          • 2.1通过ref获取元素DOM结构
          • 2.2.模拟网络请求渲染数据
        • 3.动态组件
          • 3.1.A,B两个组件
        • 4.组件保持存活(销毁期)

1.组件生命周期
每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到DOM,
以及在数据改变时更新DOM。
在此过程中,它会运行被称为生命周期钩子的函数,让开发者在特定阶段运行自己的代码
有关创建:beforeCreate/created
有关渲染:beforeMount/mounted
有关更新:beforeUpdate/updated
有关卸载:beforeUnmount/unmounted
作用:在特定时期运行自己的代码

在这里插入图片描述

<template><h3>组件的生命周期</h3><button @click="updateHandle">更新事件</button><p>{{ msg }}</p>
</template>
<script>
export default{data(){return{msg:"更新之前"}},methods:{updateHandle(){this.msg = "更新之后"}},/** * 生命周期函数:*    创建期:beforeCreate(组件即将创建)/created(组件已经创建完成,但还没显示)*    挂载期:beforeMount(准备渲染)/mounted(组建渲染完成:页面可以看到)*    更新期:beforeUpdate(更新前)/updated(更新后)*    销毁期:beforeUnmount(组件销毁前)/unmounted(组件销毁后)*/beforeCreate(){console.log("组件创建之前");},created(){console.log("组件创建之后");},beforeMount(){console.log("组件渲染之前");},mounted(){console.log("组件渲染之后");},beforeUpdate(){console.log("组件更新之前");},updated(){console.log("组件更新之后");},beforeUnmount(){console.log("组件销毁之前");},unmounted(){console.log("组件销毁之后");}}
</script>
2.生命周期应用
常见应用场景:通过ref获取元素DOM结构模拟网络请求渲染数据
2.1通过ref获取元素DOM结构

在这里插入图片描述

2.2.模拟网络请求渲染数据

在这里插入图片描述

3.动态组件
有些场景会需要在两个组件间来回切换,比如Tab界面
3.1.A,B两个组件

在这里插入图片描述

<template><component :is="tabComponent"></component><button @click="changeHandle">切换组件</button>
</template>
<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default{data(){return{tabComponent: "ComponentA"}}, components:{ComponentA,ComponentB},methods:{changeHandle(){this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB":"ComponentA"}}
}</script>
4.组件保持存活(销毁期)
当使用<component :is="……"></component>来在多个组件间作切换时,被切换掉的组件会被卸载.

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我们可以通过使用<keep-alive>组件强制被切换掉的组件仍然保持存活状态

在这里插入图片描述

<template><keep-alive><component :is="tabComponent"></component></keep-alive><button @click="changeHandle">切换组件</button>
</template>
<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default{data(){return{tabComponent: "ComponentA"}}, components:{ComponentA,ComponentB},methods:{changeHandle(){this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB":"ComponentA"}}
}</script>
_____________________________________________________________________________________________
<template><h3>ComponentA</h3><p>{{ message }}</p><button @click="updateHanele">更新数据</button>
</template>
<script>
export default{data(){return{message: "老数据"}},beforeUnmount(){console.log("组件卸载之前");},unmounted(){console.log("组件卸载之后");},methods:{updateHanele(){this.message = "新数据"}}
}
</script>
_____________________________________________________________________________________________
<template><h3>ComponentB</h3>
</template>

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

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

相关文章

Android摄像头横屏的时候_人脸预览横向显示_问题解决---Android原生开发工作笔记164

在Android系统的平板中发现一个问题,我们做的一个Android程序,横屏的时候,摄像头在上面, 然后这个时候程序中的一个人脸预览页面,横向手持平板,摄像头在上面,但是这个时候预览的摄像头画面却是很像头像朝左,也是横过来的. private int getCameraOrientation(int cameraId) {Ca…

Rocky Linux安装部署Elasticsearch(ELK日志服务器)

一、Elasticsearch的简介 Elasticsearch是一个强大的开源搜索和分析引擎&#xff0c;可用于实时处理和查询大量数据。它具有高性能、可扩展性和分布式特性&#xff0c;支持全文搜索、聚合分析、地理空间搜索等功能&#xff0c;是构建实时应用和大规模数据分析平台的首选工具。 …

Linux学习之system V

目录 一&#xff0c;system V共享内存 快速认识接口 shmget(shared memory get) shmat(shared memory attach) shmdt(shared memory delete) shmctl (shared memory control) 编写代码 综上那么共享内存与管道通信有什么区别&#xff1f; system v消息队列 system v信号…

《Effective C++》- 极精简版 41-55条

本文章属于专栏《业界Cpp进阶建议整理》 继续上篇《Effective C》- 极精简版 31-40条。本文列出《Effective C》的41-55条的个人理解的极精简版本。 40、谨慎使用多重继承 个人见解&#xff1a;这是一个性价比不高的功能&#xff0c;容易出错&#xff0c;且收益不高。java语言…

代码随想录训练营总结篇

1:刚开始学习了数据结构的时候,碰到一些树图等有点畏难,感觉刷力扣跟是一件恐怖的事情 2:在网上找了很多关于数据结构与算法的视频讲解,有听进去,但是自己动手写有点困难 3:碰到一些比较复杂的问题时需要与人讨论,加了一些代码随想录中的群,发现这里是学习算法 的天堂,大家都…

【深度学习笔记】深度卷积神经网络——NiN

网络中的网络&#xff08;NiN&#xff09; LeNet、AlexNet和VGG都有一个共同的设计模式&#xff1a;通过一系列的卷积层与汇聚层来提取空间结构特征&#xff1b;然后通过全连接层对特征的表征进行处理。 AlexNet和VGG对LeNet的改进主要在于如何扩大和加深这两个模块。 或者&am…

Android 14 权限

问题Android 14 按照视频播放类的应用 无法获取到权限。 原因是从 Android 13 开始&#xff0c;如果你的应用程序 targetSdk 指定到了 33 或以上&#xff0c;那么 READ_EXTRERNAL_STORGE 权限就完全失去了作用&#xff0c;申请它将不会产生任何效果。 与此相对应的&#xff0c…

C编程学习资源汇总

Study Soures Pool 基础:推荐 C Primer Plus 第6版 中文版 + C Primer Plus 第6版 中文版习题解答 进阶:推荐使用小甲鱼的学习视频,课程细致,而且免费,资源很丰富。 首页:鱼C工作室-免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发…

诉诸存储和传输的编码

用脑补而不是重传对有损传输进行纠错 后&#xff0c;有朋友评论&#xff1a; 可现代的图像压缩、数据编码已经很大程度上把可以脑补的空间从传输载荷中沥干了——完美编码下所传输的数据是近乎噪声的没有任何特点的分布。在这个框架下&#xff0c;被压缩的载荷如果随便丢了一点…

Linux------进程地址空间

目录 一、进程地址空间 二、地址空间本质 三、什么是区域划分 四、为什么要有地址空间 1.让进程以统一的视角看到内存 2.进程访问内存的安全检查 3.将进程管理与内存管理进行解耦 一、进程地址空间 在我们学习C/C的时候&#xff0c;一定经常听到数据存放在堆区、栈区、…

4、正则表达式、本地存储

一、正则表达式 1、定义 用事先定义好的一些特定字符&#xff0c;这样的字符组合&#xff0c;组合成一个“规则字符串” 2、正则的组成 特殊字符 字母、数字、下划线、中文、特殊字符… 元字符&#xff08;常用&#xff09; 1、\d 匹配至少有一个数字 var reg /\d/ /…

2024Java面试题一

目录 问题&#xff1a; 答案&#xff1a; 问题&#xff1a; 什么是Java中的多态性&#xff08;Polymorphism&#xff09;&#xff1f;Java中的重载&#xff08;Overloading&#xff09;和重写&#xff08;Overriding&#xff09;有什么区别&#xff1f;什么是Java中的抽象类&…

XGB-13:使用 XGBoost 外部内存版本

在处理大型数据集时&#xff0c;训练 XGBoost 模型可能会面临挑战&#xff0c;因为整个数据集需要加载到内存中。这可能成本高昂&#xff0c;有时也难以实现。从版本 1.5 开始&#xff0c;用户可以定义自定义迭代器以按块加载数据来运行 XGBoost 算法。外部内存可以用于训练和预…

每日一题Acwing-借教室

503. 借教室 - AcWing题库 想到了差分没想到二分法。同时注意INT的范围是10位。 #include<iostream> using namespace std; int n,m; const int N 1e610; int r[N],s[N],d[N],t[N]; long long b[N]; bool check(int mid){for(int i1;i<n;i){b[i]r[i]-r[i-1];}for(…

SpringBoot整合rabbitmq-直连交换机队列(二)

说明&#xff1a;本文章主要是Direct定向/直连类型交换机的使用&#xff0c;它的大致流程是将一个队列绑定到一个直连交换机上&#xff0c;并赋予一个路由键 routingkey&#xff0c;当一个消息携带着路由值为routingkey&#xff0c;这个消息通过生产者发送给交换机时&#xff0…

【冲击蓝桥篇】动态规划(下):你还在怕动态规划!?进来!答题模板+思路解析+真题实战

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

【vue】vue 是怎么把 template 模版编译成 render 函数的,什么是AST抽象语法树

什么是AST 抽象语法树 是一个对象/或者json是一个数据结构 AST通常是由多个节点组成的树状结构&#xff0c;每个节点代表一个语法单位或表达式。节点之间的关系通过父子关系或兄弟关系来表示程序的结构。在不同的编程语言和工具中&#xff0c;AST可能有不同的表示方式和节点类…

Python中检查一个数字是否是科技数的完整指南

目录 前言 什么是科技数&#xff1f; 如何判断一个数字是否是科技数&#xff1f; 分割数字并计算平方 Python实现科技数检测的示例代码 科技数的应用场景 1. 数字游戏 2. 数据处理 3. 算法优化 4. 数据结构设计 总结 前言 科技数&#xff08;Tech Number&#xff09;是一…

(二十三)Flask之高频面试点

目录&#xff1a; 每篇前言&#xff1a;Q1&#xff1a;为什么把request和session放在一起&#xff1f;Q2&#xff1a;Local对象的作用&#xff1f;Q3:&#xff1a;LocalStack对象的作用&#xff1f;Q4&#xff1a;一个运行中的Flask应用程序分别包括几个Local/LocalStack&#…