Add an onChange method to Vue Refs for improved syntax and intuitiveness

[vzakharov]

Feature Description:

I propose the addition of an onChange method directly on Vue refs. This would provide a more intuitive and cleaner syntax for watching changes in a ref's value. Instead of using watch(someRef, (...)), developers could use someRef.onChange(...).

Example:

Consider a scenario where we have a search input field and we want to perform a search operation whenever the input value changes.

With the current syntax, we would do something like this (debouncing etc. aside):

const searchQuery = ref('');

watch(searchQuery, (newQuery, oldQuery) => {
  performSearch(newQuery);
});

With the proposed syntax, this could be simplified to:

const searchQuery = ref('');

searchQuery.onChange(newQuery => {
  performSearch(newQuery);
});

Benefits:

1. Improved readability: The proposed syntax clearly indicates that an action should be taken when the ref's value changes, making the code easier to understand.

2. Familiarity: For developers coming from a React background, this syntax would be more familiar and could potentially lower the learning curve.

3. Flexibility: By maintaining both syntaxes, developers could choose the one that best suits their project or personal preference.

Considerations:

While this feature could improve the intuitiveness and readability of Vue code, it's important to consider the potential impact on the Vue codebase and community. Maintaining two syntaxes for the same functionality could increase the complexity of the Vue codebase and the learning curve for new developers. Therefore, this feature should be implemented in a way that minimizes potential disruption and maximizes benefits for the community.

Looking forward to hearing your thoughts on this proposal.

[LinusBorg]

Improved readability

This is a highly subjective statement. You essentially rename "watch" to "onChange" and move it after the ref's name. That's all. I personally don't see a

Familiarity: For developers coming from a React background

What React API would be perceived as being familiar to? I can't think of any. watch is most similar to useCallback().

As we won't remove the old API, introducing this has no real benefit in my opinion.