I am facing a problem using the onUpdated lifecycle hook in Vuejs3 Composition API. It is not called when a reactive value is updated. I have reproduced the issue with a very simple app. It has one child component:
<script setup lang="ts">
import { h, ref, onUpdated } from 'vue'
const open = ref(false)
const toggle = () => {
open.value = !open.value
}
defineExpose({ toggle })
onUpdated(() => {
console.log("Updated")
})
const render = () =>
open.value ? h(
'DIV',
"Child Component"
) :
null
</script>
<template>
<render />
</template>
Then this component is used by the app:
<script setup lang="ts">
import { ref } from 'vue'
import Child from './components/Child.vue'
const menu = ref(null)
</script>
<template>
<main>
<button @click="menu.toggle()">Click Me</button>
<Child ref="menu" />
</main>
</template>
<style>
</style>
But when the button is clicked in the app, although the "Child Component" text is shown, proving that the render function is called, the onUpdated callback is not executed.
This must have something to do with the way the render function is called, or the conditional rendering because if I use v-if in a template instead, it works fine. But in my case, I do need an explicit render function.
Can anyone help?
This is probably a bug in <script setup>, as that same code works in setup().
A workaround is to switch to setup() if you need to use onUpdated():
<script lang="ts">
import { h, ref, onUpdated } from 'vue'
export default {
setup(props, { expose }) {
const open = ref(false)
const toggle = () => {
open.value = !open.value
}
expose({ toggle })
onUpdated(() => {
console.log("Updated")
})
const render = () => open.value ? h('DIV', "Child Component") : null
return render
}
}
</script>