vue使用setTimeout【function中的this失效】

最新推荐文章于 2025-03-07 13:51:01 发布

原创最新推荐文章于 2025-03-07 13:51:01 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在Vue中使用setTimeout时this指向的问题，并提供了两种解决方案：一是通过定义_this暂存this，二是在setTimeout中使用箭头函数。箭头函数中的this会捕获其父级作用域中的this，确保了在延迟执行的函数中正确访问到Vue实例的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使用setTimeout在function中直接使用this无效。正确的使用方法是：

  data(){
  	return{
  		message:"这是一条消息"
  	}
  },
  methods: {
  	func(){
  		var _this = this;    //定义_this暂存this
        setTimeout(function(){
          console.log(_this.message);
        },"500");
  	}
  }

这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。

除此之外，还可以使用箭头函数

  data(){
  	return{
  		message:"这是一条消息"
  	}
  },
  methods: {
  	func(){
        setTimeout(()=>{
          console.log(this.message);
        },"500");
  	},
  }