VueJs中带有箭头功能的“ this”的不同行为

问题描述

好的，我想谈谈3种情况。我知道箭头函数具有词法作用域，并且将向外传播，直到找到匹配项为止。但是，在某些情况下，这些行为对我来说是没有意义的，因此，进行一些解释会很好。

1。在单个文件组件的methods

中

// HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="nonArrow">click me</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',props: {
    msg: String
  },methods: {
    nonArrow() {
      console.log(this);
    },arrow: () => {
      console.log(this);
    }
  }
}
</script>

nonArrow()照常显示VueComponent实例。 arrow()显示undefined，但不显示window吗？

2。脚本标记中的Vue内部组件。

new Vue({
    el: '#app',data: {
    },methods: {
        noArrow() {
            console.log(this);
        },arrow: () => {
            console.log(this);
        }
})

noArrow()给出一个Vue实例，但是arrow()给出一个window对象。为什么在上一个示例中未引用window？

3。使用严格模式

methods: {
    noArrow() {
        console.log(this);
    },arrow: () => {
        "use strict";
        console.log(this);
    }
}

在第二个示例中，如果我在方法内部使用带有箭头功能的严格模式，它仍会输出window对象，而在外部以严格模式定义的普通箭头函数将控制台日志undefined。这是怎么回事？

解决方法

不要在options属性或回调中使用箭头函数，例如创建的（）=> console.log（this.a）或vm。$ watch（'a'，newValue => this.myMethod（） ）。由于箭头函数没有this，因此将其视为任何其他变量，并在父作用域中进行词法查询，直到找到为止，这通常会导致错误，例如Uncaught TypeError：无法读取undefined或Uncaught TypeError：this.myMethod不是功能。

您不应使用箭头功能。请参考此链接。

https://vuejs.org/v2/guide/instance.html#Data-and-Methods