`@vue:*` hooks missing in new documentation

[DrJume]

I could not find any references on documentation pages to the very practical @vnode-* hooks.

Currently they are only explained in the migration guide, but sadly they are outdated and shown in the old @vue:* format. https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html

[liulinboyi]

The @vnodeXXX usage will be deprecated😉.

[DrJume]

Oh ok... I thought only the @vue:* notation will be deprecated.

What will be the alternative to @vnode-*?

[DrJume]

But are you sure this isn't a typo?
I'm asking myself: why would a deprecation notice of the whole @vnode-* feature be placed above a compatibility check for the old deprecated? @vue:* notation?

[skirtles-code]

@vue: is the new syntax, introduced in 3.2.25. The migration guide originally mentioned @vnode- but it was changed once @vue: was added.

[DrJume]

Thank you for clarifying! 😃

[NataliaTepluhina]

From what I recall, the usage of @vue: hooks is not encouraged and we didn't document them intentionally. Same applied to v2 docs where hook: didn't appear in the guide.

[renatodeleao]

A bit late comment, but I am curious why is the usage not encouraged? The alternative is adding at least 3 boilerplate-ish lines of code for achieving the same result which is not as DX-friendly.

import { onMounted } from 'vue'

const emit = defineEmits(['mounted'])

onMounted(() => emit('mounted'))

This is particularly handy for DOM related side-effects.

[KaelWD]

onMounted also doesn't always work if you're using it to access an element inside another component

<template>
  <Component>
    <div ref="el" />
  </Component>
</template>

<script setup>
  const el = ref()
  onMounted(() => {
    el.value
  })
</script>

If Component doesn't render its default slot immediately then el.value will still be undefined, with vnode events you can just put @vue:mounted on the div instead of having to create another wrapper component with onMounted for it.