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同理别的也一样}}})