关于vue项目watch函数的this指向问题

最近在实现一个功能的时候用到了watch函数 需要在watch函数里使用this获取data里面的值 如下

data: {
    return {
                                            footerShow:1
    }
},
watch: {
    parentInfo: ()=>{
      console.log(this.footerShow)
    }
}

但是运行时却发现报错了

通过打印this发现uderfined 当时想到会不会是箭头函数的问题 于是就把函数修改了下

data: {
    return {
                                            footerShow:1
    }
},
watch: {
    parentInfo: function(){
      console.log(this.footerShow)
    }
}

进行修改了之后果然运行正常了 此时打印this就可以打印出this指向VueComponent

普通函数的this是指向调用当前函数的对象 而箭头函数的this是指向定义函数时所在的作用域 查找官方文档也有定义 如图