vue中在mounted中v _this=this作用及案例解析

v_this只是一个变量名，this代表父函数，如果在子函数还用this，this的指向就变成子函数了，v_this就是用来存储指向的。

普通函数中的this表示调用此函数时的对象，箭头函数里面的this会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind
普通函数的this指向调用它的那个对象

举个例子

在开发中遇到了这样的问题，需要点击echarts图表对应的数据然后t跳转到详情页，具体功能是这样

methods:{
Chart(){
var option = {
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的搜索页面
myChart.on('click', function(params) {
 this.$router.push({path:'/detiles',query:{name:params.name}})
});
}
}

这个时候就出现了报错，意思是push方法未定义，那肯定就是this.$router没有找到。
我们可以这样改一下

// 全局定义v-this
let v_this

mounted(){
v_this=this
}
methods:{
Chart(){
var option = {
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的搜索页面
myChart.on('click', function(params) {
 v_this.$router.push({path:'/detiles',query:{name:params.name}})
});
}
}

这样就可以找到this.$router,正常的进行跳转。