Different behaviour of 'this' with arrow function in VueJs

Question

Alright, there are 3 cases that I want to talk about. I know that arrow functions have lexical scoping and this will propagate outwards until a match is found. However here are some cases where the behaviours are not making sense to me, so some explanation would be great.

1. Inside a Single File Component's 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() displays VueComponent instance as usual. arrow() displays undefined but shouldn't it display window ?

2. Inside Vue component from script tag.

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

noArrow() gives a Vue instance, but arrow() gives the window object. Why is window not being referenced in the previous example?

3. Using strict mode

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

In the 2nd example, if I use strict mode with the arrow function inside the methods, it still outputs window object, whereas a normal arrow function defined outside with strict mode will console log undefined. What is going on here?

Answer 1

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

You shouldn't use arrow function. Please refer to this link.

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