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

在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");
  	},
  }

箭头函数中的访问的this实际上是其父级作用域中的this，箭头函数本身的this是不存在的，这样子就相当于此时函数中的this是在声明的时候就确定了，所以是直接指向了data里面的变量。