Refs were broken between alpha.4 and alpha.5

[jods4]

Version

3.0.0-alpha.6

Reproduction link

https://codesandbox.io/s/v-model-decomposed-camel-case-s05q5

Steps to reproduce

Just open the repro, nothing to do.

What is expected?

Ref should be set to DOM element (-> Page says Ref works).

What is actually happening?

Ref stays null (-> Page says Ref doesn't work).

---

This a regression that happened between alpha.4 and alpha.5, as can be seen by changing the script source in repro.

[yyx990803]

Do note in alpha.4 it leads to an infinite loop warning. This is because the ref was referenced as a dependency for the render and mutated (from null to the element) in the same render cycle.

The fact that a template ref is null during the first render is the expected and correct behavior. To ensure access to the ref you need to do it in onMounted, and it is never recommended to access a template ref in the same template. There's no way for a template ref to be available before it is even rendered.

[jods4]

@yyx990803 The problem is... it just doesn't work.

This was a simple repro, but my intent is to access the DOM element in a watch to do stuff with the elements. As watch is run after mounting, it's supposed to work, doesn't it?

This examples paints a canvas:
https://codesandbox.io/s/pedantic-ives-3iyqk
It worked in alpha.4 but fails after.
How am I supposed to do this?
I'm tyring to manipulate a DOM element in my component and I can't get anything to reasonably work past alpha.4, it's really frustrating if that's the intended design.

[yyx990803]

watch behavior has also changed! (See the last item here)

Eager watchers now fire synchronously (this is necessary to make them work inside Suspense trees and for server rendering). To make the initial run be able to access template refs, wrap them in onMounted:

onMounted(() => {
  watchEffect(() => {
    // can access DOM now
  })
})

[jods4]

OK, will try.
I assume a watch started in onMounted is cleaned up automatically when the component is unmounted, just like it would be if created in setup?

Which makes me wonder: what is the precise rule? When can I start a computed/watch/watchEffect and have it disposed automatically? When can I not?

[yyx990803]

@jods4 setup() + all lifecycle hooks.

[jods4]

@yyx990803 seems to work in simple cases.
My refs still don't work in a slot, is that expected? Repro here:
https://codesandbox.io/s/v-model-decomposed-camel-case-gp8c5

EDIT: I thought that it might be related to #766 but it doesn't seem to fix it.

[yyx990803]

I think it never worked inside slots - that's a separate issue though. For now you can use a function ref to get around that:

<v-comp>
  <div :ref="el => (y = el)"></div>
</v-comp>

[jods4]

Shall I open an issue for that?
I'm learning new things (functions ref!) but it's ridiculous that I can achieve it with this obscure syntax yet the intuitive way doesn't work.

[yyx990803]

It's been fixed in 3eab143