eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

Rule proposal: `vue/no-direct-ref-in-watch`

Open Revadike opened this issue 11 months ago • 0 comments

Please describe what the rule should do: This rule should enforce the use of arrow functions for dependencies in the watch function in Vue 3. Instead of directly passing a ref or variable, the rule should ensure that developers use a function returning the reactive value. This will help avoid potential issues with reactive tracking and align with best practices.

What category should the rule belong to? [ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[X] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

// Incorrect usage (should warn)
watch(myVar, handler)

// Correct usage
watch(() => myVar.value, handler)

Additional context This rule would provide clear guidance for writing more consistent and reliable watch expressions in Vue 3.

Revadike avatar Dec 21 '24 20:12 Revadike