template ref does not work as expected

[BillSchumacher]

Version

3.0.0-rc.5

Reproduction link

https://github.com/BillSchumacher/minimal-ref

Steps to reproduce

git clone git@github.com:BillSchumacher/minimal-ref.git
cd minimal-ref
yarn install
yarn run dev
Open dev tools.

What is expected?

The hello and logo references should be accessible and trigger the computed property to refresh after the template has rendered. This should cause the computed style to update and probably update the output in the console.

What is actually happening?

References are not triggering reactive updates once assigned or the template has been compiled.

---

Computing dynamic styles based on the parent container height for example would require looking up the element using a dom selector if this feature is not accessible.

I'm trying to implement the react-color package in Vue3, the gradient containers rely on the parent element's clientHeight. You'll notice that this.$refs does indeed update in the console but the computed function is not called again.

[BillSchumacher]

Refs from child objects are not passed back to parent and parent refs are not passed down to children, accessing refs after mounted and from methods also does not give the correct result.

[BillSchumacher]

Did some more testing, pretty convinced something is really wrong. In the console output, it shows a height of 200px everywhere when you expand the proxy target. However, no matter what I do it always returns 0 in the component. I'm fairly certain this was a thing in vue2.

[Picknight]

Special Attributes - ref

$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding

[posva]

Using the Composition API, you should be able to get reactive refs though. But passing around the elements like that looks like a bad design unless you are integrating a vanilla JS library with Vue

[BillSchumacher]

Wait what? It doesn't work... you want me to document.select instead of using a ref? Kinda defeats the purpose.

[yyx990803]

1. Child component is mounted before the parent, so it's possible for the parent ref to be not set yet when the child is mounted (this is why the child's mounted hook throws error)

2. Because of (1), you need to check the presence of the parent ref first, e.g. with something like parentRefs.logo && parentRefs.logo.height in a computed property.

3. Note in your example, the image's height will always be 0 on initial render because the image is loaded asynchronously and the height is always 0 before it's loaded, unless you explicitly specify a height for it.

In short, remember that because refs can only be set after the initial render, they are not guaranteed to exist in all cases. Always check for its presence first.