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

Advertisements
Nuxt.jsESLint

いつもお世話になっております。

監視プロパティwatcherの挙動を勉強していて気づいたことを備忘録。

Advertisements

監視プロパティ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の特性についてまだよく知らないアロー関数式を知らない、または知っているけど実装経験がない概要Jav…

というわけで、こう


<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>

 

タイトルとURLをコピーしました