vue:this和that的理解

  • 当我们进入公司的时候会发现一个很常见的情况,就是你的前开发者会常用这么一个变量:that、self…

  • 为什么会用到that、self呢,小编是这么理解的,this指向的是当前的对象,而that、self临时的变量,为了临时存储一下this的保证不管我们怎么调用,都能使用到this,而且对于vue来说,能保证这个this的值不变,一直都是vue实例
  • 接下来小编用个案例简单展示一下结果:
mounted () {this.this_that()
},
methods: {this_that () {const that = thisconsole.log('this1', this)setTimeout(function () {console.log('this2', this)console.log('that3', that)}, 1000)setTimeout(() => {console.log('this4', this)console.log('that5', that)}, 1500)},
}
  • 输出结果:

  • 解析:

this1 -- this1很容易理解,肯定就是指向的vue实例了

this2 -- this2输出的是window对象,为什么呢,首先我们是用function(){}普通函数的形式,计时器是window函数调用的,所以指向的就是window

that3 -- that3为什么输出的是vm实例了呢,是因为我们在定时器外面定义了一个that变量,在定时器里面输出的只是一个变量的值,而不是this的指向

this4 -- 为什么这里跟this2不一样了呢,注意我们这里定时器使用的是箭头函数,箭头函数的this指向的是上一级调用它的对象,所以啊,这里this指向的是vue实例

that5 -- 跟that3一样

这下应该知道原因了吧:我们提前使用that存储了this,那么在这个逻辑里面,不管我们怎么调用,最终我们都能使用到vue实例的this,就不用考虑this的指向问题了,方便了我们对this的使用。

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

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

相关文章

SQL注入之联合查询

文章目录 联合查询是什么?联合查询获取cms账号密码尝试登录 联合查询是什么? 适用数据库中的内容会回显到页面中来的情况。联合查询就是利用union select 语句,该语句会同时执行两条select 语句,实现跨库、跨表查询。 必要条件 两…

基于AVR128单片机世界电子时钟的设计

一、系统方案 上电初始化完成系统初始化,液晶滚动显示北京、莫斯科、东京、伦敦、巴黎、纽约等六个城市的标准时间,显示的内容包括地区名及相应地区的年、月、日、星期、时、分、秒。 使用K1按键控制滚动显示或稳定显示某个地区的时间。 使用K3、K4、K5按…

net start Mysql 启动服务时 ,显示“Mysql服务正在启动 Mysql服务无法启动 服务没有报告任何错误

一、问题 有时候,输入net start Mysql 启动服务时 mysql>net start Mysql 显示 Mysql服务正在启动 Mysql服务无法启动 服务没有报告任何错误 二、原因 由于mysql的默认端口是3306,因此在启动服务的时候,如果此端口被占用,就会出…

Java使用MyBatis、JDBC批量插入数据

使用MyBatis、JDBC做大量数据插入 准备 表结构 CREATE TABLE tb_users (id varchar(255) NOT NULL,name varchar(100) DEFAULT NULL,age int(11) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8;MyBatis配置文件 <?xml version"1.0" enc…

Ribbon:使用Ribbon实现负载均衡

Ribbon实现的是实线走的 建立三个数据库 /* SQLyog Enterprise v12.09 (64 bit) MySQL - 5.7.25-log : Database - db01 ********************************************************************* *//*!40101 SET NAMES utf8 */;/*!40101 SET SQL_MODE*/;/*!40014 SET OLD_UNIQ…

什么是Nginx HA?

什么是Nginx HA 1.1 什么是Nginx HA?1.2 高可用性的类型1.3 理解Nginx HA 示例1.4为什么高可用性很重要&#xff1f;1.5 高可用是如何实现的&#xff1f;1.6 如何支持高可用性?1.7 最佳实践&#xff1a;高可用性 1.1 什么是Nginx HA? 高可用性(HA) 是指系统通常通过使用内置…

万宾科技22款产品入选《城市生命线安全工程监测技术产品名录》

2023年8月17日-18日&#xff0c;由北京市地下管线协会主办的2023首届城市生命线安全与发展大会在北京召开&#xff0c;本次大会汇聚中央及地方政府主管领导、院士专家、行业领袖、龙头代表、产业精英等。 大会聚焦安全监管智慧平台和燃气爆炸、城市内涝、地下管线交互风险、第三…

SQL Server、MySQL和Oracle数据库分页查询的区别与联系

摘要&#xff1a;本文将通过一个现实例子&#xff0c;详细解释SQL Server、MySQL和Oracle这三种常见关系型数据库在分页查询方面的区别与联系。我们将提供具体场景下的SQL语句示例&#xff0c;并解释每个数据库的分页查询用法以及优化方法&#xff0c;帮助读者更好地选择适合自…

无人机电力巡检:探索电力设施维护的新模式

电力巡检一直是电力行业中关键的环节&#xff0c;它的目的是确保电力设施的正常运行和安全稳定&#xff0c;对提高电力设施的可靠性、确保电力供应的稳定性和提高电力企业的管理水平具有重要的意义。传统的电力巡检方式通常采用人工的方式进行&#xff0c;这种方式存在很多的问…

机器学习笔记之优化算法(十九)经典牛顿法的收敛性分析

机器学习笔记之优化算法——经典牛顿法的收敛性分析 引言回顾&#xff1a;算法的收敛性分析 Wolfe \text{Wolfe} Wolfe准则的收敛性分析梯度下降法在凸函数的收敛性分析梯度下降法在强凸函数的收敛性分析 经典牛顿法的收敛性分析收敛性定理介绍证明过程关于隐含条件的说明 引言…

浅谈Spark的RDD、部署模式

一、RDD Spark RDD&#xff08;弹性分布式数据集&#xff09;&#xff0c;弹性是指Spark可以通过重新计算来自动重建丢失的分区。 从本质上讲&#xff0c;RDD 是数据元素的不可变分布式集合&#xff0c;跨集群中的节点进行分区&#xff0c;可以与提供转换和操作的低级 API 并行…

RPC和HTTP协议

RPC 全称&#xff08;Remote Procedure Call&#xff09;&#xff0c;它是一种针对跨进程或者跨网络节点的应用之间的远程过程调用协议。 它的核心目标是&#xff0c;让开发人员在进行远程方法调用的时候&#xff0c;就像调用本地方法一样&#xff0c;不需要额外为了完成这个交…

docker 报错

问题说明&#xff1a;我是服务器上面的docker拉到本地30卡想用的&#xff0c;但是失败&#xff0c;报错如下&#xff1a; 服务器上面显存驱动是450&#xff0c;本地30卡驱动是470 nvidia-docker run -it --name 20230821_3 --shm-size 16g -p 10029:22 --privileged 20230821_i…

QT通过ODBC连接GBase 8s数据库(Windows)示例

示例环境&#xff1a; 操作系统&#xff1a;Windows 10 64位数据库及CSDK版本&#xff1a;GBase 8s V8.8_3.0.0_1 64位QT&#xff1a;5.12.0 64位 1&#xff0c;CSDK安装及ODBC配置 1.1&#xff0c;免安装版CSDK 下载免安装版的CSDK驱动&#xff0c;地址&#xff1a;https:…

HTTP协议(JavaEE初阶系列15)

目录 前言&#xff1a; 1.HTTP协议 1.1HTTP协议是什么 1.2HTTP协议的报文格式 1.2.1抓包工具的使用 1.2.2HTTP请求 1.2.3HTTP响应 2.HTTP请求 2.1首行的组成 2.2.1URL的组成 2.2认识“方法”&#xff08;method&#xff09; 2.2.1GET方法 2.2.2POST方法 2.2.3GET…

jvm-运行时数据区概述及线程

1.运行时数据区内部结构 不同的jvm对于内存的划分方式和管理机制存在着部分差异 java虚拟机定义了若干种程序运行期间会使用到的运行时数据区&#xff0c;其中有一些会随着虚拟机的启动而创建&#xff0c;随着虚拟机的退出而销毁&#xff0c;另外一些则是与线程一一对应的&…

【算法刷题之链表篇(1)】

目录 1.leetcode-82. 删除排序链表中的重复元素 II&#xff08;1&#xff09;题目描述&#xff08;2&#xff09;方法及思路&#xff08;一次遍历&#xff09;&#xff08;3&#xff09;代码实现 2.leetcode-19. 删除链表的倒数第 N 个结点&#xff08;1&#xff09;题目描述&a…

测试平台metersphere

metersphere可以做接口测试、UI测试、性能测试。 metersphere接口测试底层是jmeter&#xff0c;可以做API管理&#xff0c;快捷调试&#xff0c;接口用例管理&#xff0c;接口自动化场景执行一键选取用例范围&#xff0c;生成测试报告。 会用jmeter&#xff0c;metersphere会…

小程序数据可视化:使用图表和可视化工具展示数据

在当今信息爆炸的时代&#xff0c;数据无疑是最珍贵的资源之一。然而&#xff0c;海量的数据如果不加以整理和展示&#xff0c;很难从中获取有价值的信息。这时候&#xff0c;数据可视化就发挥了重要作用&#xff0c;它能够通过图表和可视化工具将复杂的数据转化为直观的视觉形…

《Java极简设计模式》第04章:建造者模式(Builder)

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 源码地址&#xff1a;https://github.com/binghe001/java-simple-design-patterns/tree/master/j…