vue中的this指向

this指向

js：

  • 普通函数，谁调用的它，this就指向谁，
  • 箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。

vue：

  • methods、生命周期函数中如果用的是正常函数，那么它的this就指向Vue实例；
  • 如果是箭头函数，在非严格模式下this就指向window对象，严格模式下是undefind。

原因：vue 内部实际上对methods属性中的方法进行了遍历，将对应的方法通过bind绑定了this，使得this指向Vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue1.vue
...
function1() {
  this.xxx=xxx;
}
...

// vue2.vue
...
function2(function1) {
  function1();
}
...

// vue2调用function1()时，this扔指向vue1，不指向vue2

参考文章：https://juejin.cn/post/7109889547537743886