vue新人求助下，为什么用箭头函数无法获取this.isPhoneFooter的值

Question

我的switchPhone函数用箭头函数的方式写无法获取到this.isPhoneFooter的值但是换成switchPhone(){}就可以正确获取到，这是什么原因？代码如下exportdefault{data(){return{isPhoneFooter:true,active:false,items01:[{select:'目标检测'},{select:'图像分类'},{select:'人体识别'},{select:'人脸识别'},{select:'文字处理'},{select:'音频处理'}],items02:[{select:'精彩预览'},{select:'智能集锦'},{select:'物料/海报生成'},{select:'3D原生植入'},{select:'动态浮层植入'}],items03:[{select:'推荐算法'},{select:'以图搜影'},{select:'聚类分析'}]}},methods:{switchPc(){//console.log('切换电脑版');//letw=document.documentElement.clientWidth||document.body.clientWidth;//leth=document.documentElement.clientHeight||document.body.clientHeight;//document.getElementsByTagName('body')[0].style.zoom='0.1';this.isPhoneFooter=false;},switchPhone:()=>{//console.log('切换手机版');document.getElementsByClassName('phone_home_middle')[0].style.width='150px';this.isPhoneFooter=true;}}}

Answer 1

原文链接
注意，不应该使用箭头函数来定义method函数(例如plus:()=>this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.a将是undefined。
                            

Answer 2

其实就是箭头函数绑定了父级作用域的上下文,通俗点指向的就近使用的this指向
window.a=2;
functionsetNum(){
this.a=1
}
setNum()
newVue({
el:'#wrap',
data:{
},
methods:{
switchPhone:()=>{
console.log(this)//这样的话指向的this指向的是window同理别的也一样
}
}
})