search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.66k stars 8.33k forks source link

Detect incorrect ref usage in template #1840

Closed stefnotch closed 4 years ago

stefnotch commented 4 years ago

What problem does this feature solve?

Since https://github.com/vuejs/vue-next/pull/1682 , refs in templates are not deeply unwrapped anymore. However, always remembering that isn't easy.

I frequently type something like

{{element.scope.name}}

when I actually mean

{{element.scope.value?.name}}

Sadly, neither my IDE (Visual Studio Code with Vetur) nor Vue.js catch this issue. At runtime, you simply see nothing. It would be great if that were improved.

What does the proposed API look like?

Maybe the template compiler has enough information to catch such incorrect usage. Otherwise, I guess this is an issue for Vetur?

posva commented 4 years ago

Can you provide more context like about when this is biting you?

yyx990803 commented 4 years ago

You can avoid exposing raw refs to the template (i.e retain the old behavior) by wrapping your element property with reactive:

return {
-  element
+  element: reactive(element)
}

It is technically possible to detect such cases in the compiler, but it is something better done at the tooling level (i.e. Vetur) since it involves type checking.