vue 学习笔记

news2024/9/23 23:34:07

生命周期

1)定义:vue实例从创建到销毁的过程
2)钩子函数
2.1)beforeCreate:vue实例初始化之前调用,这个阶段vue实例刚刚在内存中创建,此时data和methods这些都没初始化好。
2.2)Created:vue实例初始化之后调用,这个阶段vue实例在内存中已经创建好了,data和methods也能够获取到了,但是模板还没编译。
2.3) beforeMount : 挂载到DOM树之前调用,这个阶段完成了模板的编译,但是还没挂载到页面上。
2.4) mounted: 挂载到DOM树之后调用,这个阶段,模板编译好了,也挂载到页面中了,页面也可以显示了。
2.5) beforeUpdate:数据更新之前调用,此时data中数据的状态值已经更新为最新的,但是页面上显示的数据还是最原始的,还没有重新开始渲染DOM树。
2.6) updated:数据更新之后调用,此时data中数据的状态值是最新的,而且页面上显示的数据也是最新的,DOM节点已经被重新渲染了。
2.7)beforeDestroy:vue实例销毁之前调用,这个阶段vue实例还能用。
2.8)destroyed:vue实例销毁之后调用,此时所有实例指示的所有东西都会解除绑定,事件监听器也都移除,子实例也被销毁。

v-if 与 v-show的区别

1)v-if 为false的时候,不会渲染
2)v-show 为false的时候也会渲染,只是通过css的属性隐藏
3)如果页面显示和隐藏是一次性决定的,后面不再改变的话,这种情况用v-if比较好,因为v-show的话,它会把不需要显示的元素给渲染在页面上
4)如果渲染之后,显示和隐藏还是频繁切换,这种情况用v-show会更好,因为用v-show的话,如果控制显示和隐藏,它只需要操作css的属性就可以了,如果是用v-if,它需要创建
我们的dom元素,然后销毁我们的dom元素,那这样性能消耗会更加大。

父组件引入子组件,那么生命周期执行的顺序是啥?

1)父 beforeCreate created beforeMount
2)子 beforeCreate created beforeMount mounted
3)父 mounted

发送请求在created 还是 mounted?

1)如果业务是父组件引入子组件,并且优先加载子组件的数据,那么在父组件中当前的请求要放mounted中。
2)如果当前组件没有依赖关系,那么放在哪个生命周期中请求都是可以的。

为什么发送请求不在beforeCreate里?

因为如果请求在methods封装好了,在beforeCreate调用的时候,beforeCreate阶段是拿不到method里面的方法的

在created中如何获取dom?

只要写异步代码,获取dom是在异步中获取到,就可以了。例如:setTimeout, promise.then或者使用vue系统内置的this.$nextTick

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

keep-alive是用来缓存组件的,如果使用该组件,新增两个生命周期:activated和deactivated

第二次或者第N次进去组件会执行哪些生命周期?

1)如果当前组件加入了keep-alive,只会执行一个生命周期,activated
2)如果没有加入keep-alive,会执行前四个

组件间通信

1) 父组件向子组件传值 props,只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。
在这里插入图片描述
在这里插入图片描述
2)子组件向父组件传值,emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。 通过一个例子,说明子组件如何向父组件传递数据。在上个例子的基础上, 点击页面渲染出来的 ariticle 的 item, 父组件中显示在数组中的下标
在这里插入图片描述
在这里插入图片描述
3)parent/children
parent 是 Vue 实例,指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。节制地使用 $parent 和 $ children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
4)provide/ inject
Provide/ inject 是 vue2.2.0 新增的 api, 简单来说就是父组件中通过 provide 来提供变量, 然后再子组件中通过 inject 来注入变量。

注意: 这里不论子组件嵌套有多深, 只要调用了 inject 那么就可以注入 provide 中的数据,而不局限于只能从当前父组件的 props 属性中回去数据。
5)ref / refs
ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据,
在这里插入图片描述
6)event/Bus
eventBus 又称为事件总线,在 vue 中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。

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

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

相关文章

新时代体育场馆的未来之路——气膜体育馆

近年来,我国正全面贯彻实施全民健身国家战略,秉持“发展群众体育,服务健康中国”的理念,深入推动群众参与的体育活动,努力实现全民健身与全民健康的深度融合发展。在这一大潮中,体育场馆建设成为业内的一项…

Linux:锁定文件chattr

chattr 锁定 使用该命令进行文件的锁定以提高安全性 chattr i /etc/passwd /etc/shadow chattr i 目标文件 这样这两个文件就不能被修改了,包括root也不能去修改,但是root可以解锁后再去修改 解锁 chattr -i /etc/passwd /etc/shadow chattr -i 目标…

《PySpark大数据分析实战》-16.云服务模式Databricks介绍运行案例

📋 博主简介 💖 作者简介:大家好,我是wux_labs。😜 热衷于各种主流技术,热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员(PCTA)、TiDB数据库专家(PCTP…

【深度学习】序列生成模型(六):评价方法计算实例:计算ROUGE-N得分【理论到程序】

文章目录 一、BLEU-N得分(Bilingual Evaluation Understudy)二、ROUGE-N得分(Recall-Oriented Understudy for Gisting Evaluation)1. 定义2. 计算N1N2 3. 程序 给定一个生成序列“The cat sat on the mat”和两个参考序列“The c…

快速入门 — — 在Moonbeam上开发

访问熟悉的以太坊工具是一回事,获得顶级支持、拥有构建突破性跨链应用程序的资源是另一回事。 Moonbeam汇集了通过集成互操作性解决方案访问任何链的能力、具有完全以太坊兼容性的理想开发环境,以及使用Substrate在波卡上安全扩展的能力。 开始在Moonb…

App(Android)ICP备案号查询——————高仿微信

😄 个人主页:✨拉莫帅-CSDN博客✨🤔 博文:132篇🔥 原创:130篇,转载:2篇🔥 总阅读量:388923❤️ 粉丝量:112🍁 感谢点赞和关注 &#x…

C/C++ BM1反转链表

文章目录 前言题目1.解决方案一1.1 思路阐述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这题是牛客网的BM1,主要涉及到链表的操作以及栈数据结构的使用。 题目 给定一个单链表的头结点pHead(该头节点是有值的,比如在下图,它的…

如何免费搭建私人电影网站(三)

接上一篇文章: 网站模版上传到空间后就进行安装网站了操作如下图: 打开链接地址: 输入前面设置好的FTP密码 进入安装界面 点同意后下一步 需要填入数据库的账号和密码 返回虚拟主机界面进行设置 如下图点初始化 修改数据库的密码 然后…

如何设置微信的自动回复,让你的沟通更高效?

你们会常常遇到这些问题吗? 1、有过客户添加你没有及时回复,导致客户的流失。 2、客户常问的问题每天要重复的回答,想要有快捷回复的方式或者有可以代替人工去回答一些问题。 ...... 微信自动回复就可以让你在忙碌或者不方便回复消息的时候&a…

带你深入解析 Compose 的 Modifier 原理 -- Modifier、CombinedModifier

Modifier 的含义 实际开发过程中,随处可见各种 Modifier,比如: Modifier.size() // 尺寸Modifier.width() // 宽度Modifier.height() // 高度Modifier.padding() // 间距Modifier.background() // 背景Modifier.…

二阶多智能体的一致性-包含matlab仿真代码

模型 这里仅用一个简单的双积分模型 { x ˙ i v i v ˙ i u i \begin{equation} \begin{cases} {\dot x}_i v_i \\ {\dot v}_i u_i \\ \end{cases} \end{equation} {x˙i​vi​v˙i​ui​​​​ 我们的控制最终的期望是使得状态趋于一致,即 lim ⁡ t → ∞ ∣…

2024年云渲染哪个便宜?超实惠不排队的云渲染农场推荐

随着云计算技术的进步,云渲染逐渐成为动画制作和视觉效果产业中的首选技术。然而,对于许多创作者来说,寻找既经济又可靠的云渲染提供商一直是个重点问题。在众多云渲染提供商中,一家以其超值的性价比而闻名的云渲染农场尤其受到青…

Windows下安装MongoDB实践总结

本文记录Windows环境下的MongoDB安装与使用总结。 【1】官网下载 官网下载地址:Download MongoDB Community Server | MongoDB 这里可以选择下载zip或者msi,zip是解压后自己配置,msi是傻瓜式一键安装。这里我们分别对比进行实践。 【2】ZI…

Hudi 表类型和查询类型

数据湖hudi的表类型定义了数据在DFS上如何组织布局,同时实现一些timeline等操作(表类型定定义数据是如何写入的);查询类型则是定义如何读取DFS上的数据。 Table typequery typeCopy-On-Write 快照查询; 增量查询&…

【数据分享】2019-2023年我国地级市逐年二手房房价数据(免费获取/Excel/Shp格式)

房价是一个城市发展程度的重要体现,一个城市的房价越高通常代表这个城市越发达,对于人口的吸引力越大!因此,房价数据是我们在各项城市研究中都非常常用的数据!之前我们分享了2019—2023年我国地级市逐月的二手房房价数…

VWAP 订单的最佳执行方法:随机控制法

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学,点击下方链接报名: 量化投资速成营(入门课程) Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

React基础巩固日志2

今天开始学习理解如何使用 props向组件传递数据和事件处理函数 在 React 中,props 是组件之间交互的一种方式,它允许你将数据从一个组件传递到另一个组件,下面我书写一个demo,以便于我更好的理解组件之间传值 这个例子中&#xff…

基于遥感数据的地表蒸散量的获取与分析的解决方案

1.引言 蒸散是指水分从地表移向大气的过程,它包括土壤与植株表面液相或固相水的蒸发和通过植物组织的蒸腾。蒸散过程是土壤、植被、大气系统中水分运移、转化的重要环节,因此准确的估算区域蒸散量能够有效提高气象预测以及水文气象预测的精度, 同时蒸散量的精确估算对于地理、…

OpenCV | ROI ——region of interest 感兴趣的区域(车道线掩码)

import cv2 import numpy as npedges_img.jpg edge_img cv2.imread(edges_img.jpg,cv2.IMREAD_GRAYSCALE) mask np.zeros_like(edge_img) mask cv2.fillPoly(mask,np.array([[[81,240],[212,143],[230,143],[386,238]]]),color255)#像素点用画图就能测出来 把鼠标放在图片…

第十七章 : Spring Boot 集成RabbitMQ(一)

第十七章 : Spring Boot 集成RabbitMQ(一) 前言 本章介绍RabbitMQ的核心概念和消息中间件中非常重要的协议——AMQP协议,然后介绍Direct、Topic、Headers、Fanout等交换机的作用和特点;RabbitMQ的五种消息发送模式-简…