[Nuxt.js, Vue.js, ESLint]監視プロパティwatchではアロー関数が使えない

監視プロパティwatch内ではアロー関数を使うべきではない

nuxt.jsで、監視プロパティであるwatchのオプションdeepの挙動を調べていたら、怒られました。

<script>
export default {
  data() {
    return {
      colors: [
        { name: 'red' },
        { name: 'blue' },
        { name: 'green' },
      ],
    }
  },
  watch: {
    colors: {
      handler:(newValue, oldValue) => {
        console.log('updated!')
      },
      deep: true,
    },
  },
}
</script>

ESLint caution: You should not use an arrow function to define a watcher

はい

なぜなら、アロー関数はthisの挙動が変わってしまうため。アロー関数は親のコンテキストをバインドしており、thisの挙動が意図しているVueインスタンスとは異なってしまう。

This rules disallows using arrow functions to defined watcher.The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect.(see here for more details (opens new window))
eslint-plugin-vue

thisの挙動についてはここがわかりやすかったです！

【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita

対象読者 ES6を詳しくは知らないなんとなくJavaScriptを書けるけど、JSのthisの特性についてまだよく知らないアロー関数式を知らない、または知っているけど実装経験がない概要 JavaScriptのES6で導入...

というわけで、こう


<script>
export default {
  data() {
    return {
      colors: [
        { name: 'red' },
        { name: 'blue' },
        { name: 'green' },
      ],
    }
  },
  watch: {
    colors: {
      // handler:(newValue, oldValue) => {
      handler(newValue, oldValue) {
        console.log('updated!')
      },
      deep: true,
    },
  },
}
</script>