VUE里面 watch log出来的this，与mounted log出来的this 不一样！ 诡异？

Question

    watch:{
      Applist:()=>{
        console.log("Applist改变");
        var _self = this;
        console.log(_self);
        var scroll_area = document.getElementById('scroll_area');
        setTimeout(()=>{
          console.log(_self);
          _self.scrollbar(scroll_area);
        },100)
      }
    },
    mounted: function(){
      let _self=this;
      console.log("log self");
      console.log(_self);
      let scroll_area = document.getElementById('scroll_area');
      _self.getAppList();
      setTimeout(()=>{
        _self.scrollbar(scroll_area);
      },100)
    }

Answer 1

其实官方文档有写，都不能用箭头函数的

Answer 2

使用es6箭头函数是vue不会自动绑定this吧

Answer 3

看一下简单的demo

var a = {b: ()=> {console.log(this)}}

var a = {b: function () {console.log(this)}}

就是箭头函数的问题,箭头函数的this是不会绑定的，所有涉及它们的引用，都会沿袭向上查找外层作用域链的方案来处理。
我猜题主是想用es6的形式去写，那就写成下面这样，不用箭头函数，里面用箭头是没问题的

Applist () {
    console.log("Applist改变");
    var _self = this;
    console.log(_self);
    var scroll_area = document.getElementById('scroll_area');
    setTimeout(()=>{
      console.log(_self);
      _self.scrollbar(scroll_area);
    },100)
  }

Answer 4

我也遇到了，我的解决办法是watch里面
Applist:function(){

    console.log("Applist改变");
    var _self = this;
    console.log(_self);
    var scroll_area = document.getElementById('scroll_area');
    setTimeout(()=>{
      console.log(_self);
      _self.scrollbar(scroll_area);
    },100)
  }
},
在watch里面，不推荐使用Applist()=>箭头函数，要用Applist(){},此处用箭头函数this就不再指向Vue实例了，这也是官网推荐的