2022-06-18 2 分钟 0.3 k0次访问

Vue中的var that=this；

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

var that=this;

这个代码的作用是什么呢？我们首先来讲一讲this与that的区别。

var app=new Vue({
    el:"#player",
    data:{
        query:"五月天",
        musicList:[]
    },
    methods:{
        searchMusic() {
            var that=this;
            axios.get("url" + this.query).then(
                function (res) {
                    this.musicList=res.data.result.songs;
                    that.musicList=res.data.result.songs;
                }
            ).catch(function (err) {
                console.log(err);
            })
        }
}

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

所以，我们要在使用回调函数之前将app实例中的属性存储给一个其他值，也就是用that指向this。此时，that即代表app这个实例，this代表axios的回调函数。所以这个时候我们的that.musicList可以找到相应的属性。

Vue中的var that=this；