Vue中的var that=this；是啥意思？为什么要这样写？

逃离我推掉我的手 2024-03-30 15:08 156阅读 0赞

## Vue中的var that=this；是啥意思？为什么要这样写？ ##

`初学vue，记录一个思考内容。`

--------------------

#### 文章目录 ####

*  Vue中的var that=this；是啥意思？为什么要这样写？
 *  var that=this;？为什么要这样写
 *  总结

--------------------

## var that=this;？为什么要这样写 ##

> 在vue的代码中，经常能看到这样一段代码：

var that=this;

这个代码的作用是什么呢？看了些博客后，我们来浅谈一下this与that的区别。

> 以下面这段代码为例：

> 在javascript中，this用以指代当前对象，但是this却不是固定不变的。例如在this.query中，此时的this是指app这个实例本身。而this.musicList中的this指代的实际上是axios的回调函数本身，所以此时你在回调函数中，使用this.musicList必然是找不到相应的属性的，因为axios回调函数本身没有musicList这个属性。

> 所以，我们要在使用回调函数之前将app实例中的属性存储给一个其他值，也就是用that指向this。此时，that即代表app这个实例，this代表axios的回调函数。所以这个时候我们的that.musicList即可以找到相应的属性。同理，当我们的methods在定义函数中自定义了其他函数或者使用其他函数代替了axios回调函数的位置，同样回出现this.musicList找不到属性。

> 下面我们以一个实例证明我们的推测：  
> ![在这里插入图片描述][2e0e3804d497407ba1fb60c48f92b8c8.png]  
> 运行代码，使用F12打开控制台，查看运行结果。  
> 可以看到第一个打印结果对应console.log(this.test);。  
> 第二个打印结果对应于console.log(this.musicList);，  
> 第三个打印结果对应于console.log(that.musicList)。  
> 至此，可以证明我们的结论正确。  
> ![在这里插入图片描述][a9afea1e48ed4dbcba5afd95f43c3db0.png]

--------------------

## 总结 ##

`初学一门技术时，总有些许的疑惑，别怕，它们是我们学习路上的点点繁星，帮助我们不断成长。`

文章简短，希望对大家有帮助！

参考博客：[Vue中的var that=this；的含义][Vue_var that_this]

[2e0e3804d497407ba1fb60c48f92b8c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/334c3416d9a94a36857e478d1bf8d210.png
[a9afea1e48ed4dbcba5afd95f43c3db0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/61f3343051f14076a60121c991bca1e8.png
[Vue_var that_this]: https://blog.csdn.net/qq_35531985/article/details/107992527?spm=1001.2014.3001.5506