src/content/docs/linter/rules/no-vue-arrow-func-in-watch.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.14` - Diagnostic Category: [`lint/nursery/noVueArrowFuncInWatch`](/reference/diagnostics#diagnostic-category) - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Same as [`vue/no-arrow-functions-in-watch`](https://eslint.vuejs.org/rules/no-arrow-functions-in-watch){
"linter": {
"rules": {
"nursery": {
"noVueArrowFuncInWatch": "error"
}
}
}
}
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.
<script>
export default {
watch: {
foo: (val, oldVal) => {
console.log('new: %s, old: %s', val, oldVal)
}
}
}
</script>
<script>
export default {
watch: {
foo: {
handler: (val, oldVal) => {
console.log('new: %s, old: %s', val, oldVal)
}
}
}
}
</script>
<script>
export default {
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
b: 'someMethod',
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
d: {
handler: 'someMethod',
immediate: true
},
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
'e.f': function (val, oldVal) { /* ... */ }
}
}
</script>
References: