noVueArrowFuncInWatch

Ce contenu n’est pas encore disponible dans votre langue.

JavaScript (and super languages)

Summary

Rule available since: v2.3.14
Diagnostic Category: lint/nursery/noVueArrowFuncInWatch
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-arrow-functions-in-watch

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueArrowFuncInWatch": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallows using arrow functions when defining a watcher.

When using the Options API in Vue.js, defining watchers with arrow functions is discouraged. This is because arrow functions bind to their parent context, which means that the this keyword inside the arrow function does not refer to the Vue instance as expected. Instead, it refers to the context in which the arrow function was defined, which can be confusing.

Examples

Invalid

1
<script>
2
export default {
3
  watch: {
4
    foo: (val, oldVal) => {
5
      console.log('new: %s, old: %s', val, oldVal)
6
    }
7
  }
8
}
9
</script>

code-block.vue:3:10 lint/nursery/noVueArrowFuncInWatch  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found arrow function in Vue watcher definition.
  
    1 │ export default {
    2 │   watch: {
  > 3 │     foo: (val, oldVal) => {
      │          ^^^^^^^^^^^^^^^^^^
  > 4 │       console.log(‘new: %s, old: %s’, val, oldVal)
  > 5 │     }
      │     ^
    6 │   }
    7 │ }
  
  ℹ Using an arrow function here means that the `this` context will not refer to the Vue instance, which is probably not what you want.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rewrite the arrow function into a function expression.
  
    1 1 │   export default {
    2 2 │     watch: {
    3   │ - ····foo:·(val,·oldVal)·=>·{
      3 │ + ····foo:·function(val,·oldVal)·{
    4 4 │         console.log(‘new: %s, old: %s’, val, oldVal)
    5 5 │       }

1
<script>
2
export default {
3
  watch: {
4
    foo: {
5
      handler: (val, oldVal) => {
6
        console.log('new: %s, old: %s', val, oldVal)
7
      }
8
    }
9
  }
10
}
11
</script>

code-block.vue:4:16 lint/nursery/noVueArrowFuncInWatch  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found arrow function in Vue watcher definition.
  
    2 │   watch: {
    3 │     foo: {
  > 4 │       handler: (val, oldVal) => {
      │                ^^^^^^^^^^^^^^^^^^
  > 5 │         console.log(‘new: %s, old: %s’, val, oldVal)
  > 6 │       }
      │       ^
    7 │     }
    8 │   }
  
  ℹ Using an arrow function here means that the `this` context will not refer to the Vue instance, which is probably not what you want.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rewrite the arrow function into a function expression.
  
     2  2 │     watch: {
     3  3 │       foo: {
     4    │ - ······handler:·(val,·oldVal)·=>·{
        4 │ + ······handler:·function(val,·oldVal)·{
     5  5 │           console.log(‘new: %s, old: %s’, val, oldVal)
     6  6 │         }

Valid

1
<script>
2
export default {
3
  watch: {
4
    a: function (val, oldVal) {
5
      console.log('new: %s, old: %s', val, oldVal)
6
    },
7
    b: 'someMethod',
8
    c: {
9
      handler: function (val, oldVal) { /* ... */ },
10
      deep: true
11
    },
12
    d: {
13
      handler: 'someMethod',
14
      immediate: true
15
    },
16
    e: [
17
      'handle1',
18
      function handle2 (val, oldVal) { /* ... */ },
19
      {
20
        handler: function handle3 (val, oldVal) { /* ... */ },
21
        /* ... */
22
      }
23
    ],
24
    'e.f': function (val, oldVal) { /* ... */ }
25
  }
26
}
27
</script>

References:

https://vuejs.org/api/options-state.html#watch