Improve DevEx: Computed Property comparisons

[B0Bftl]

Hello,

I recently came across some Problems in a larger Code Base, that went unnoticed for quite some time.
Vue3 supports unpacking computed properties in some contexts within its templates, but there are plenty of places where you need to unpack the value. I do unterstand the technical need for that and do not object to that.

My concern is about the errors that come frome that, and how easy it currently is to miss them.

Especially when comparing/checking computed values, missing the value unpacking happens easily.

Example:

// example Composable
const useExample = () => {
    return {
        someVal: computed(() => false) 
    }
} 

// setup script in some component 
if(useExample().someVal) {
    // more code
} 

Here, the comparison looks good on first glance, but you have to know that useExample returns a computed prop to see it's actually wrong.

My proposition would be, to add a compiler option, that throws warnings on comparisons of computed properties, when they are not unpacked, if they are not explicitly annotated with a comment, something like "compare-computed-container"

At least for me, 99.99% of times I compare a Computed, I want the comparison done to the underlying value.
This compiler option would help spot those mistakes, while making the code more explicit in the rare cases, where you actually do want to compare the computed itself.

[posva]

It could also be an ESLint rule that checks that a composable is destructured. The real source of the problem is calling the composable directly in an expression

[B0Bftl]

I do not really see how deconstruction fixes the underlying issue. It doesn't even need to be a computed from a composable to get the same behavior, might just be defined in the component itself.

But the eslint rule https://eslint.vuejs.org/rules/no-ref-as-operand.html does exactly what I was thinking of :)

[jh-leong]

these lint rules could help catch related issues:

• strict-boolean-expressions - Catches indirect boolean checks
• no-ref-as-operand - Prevents direct usage of refs/computed in expressions

[B0Bftl]

no-ref-as-operand is exactly what I mean. Thanks!