带有渲染功能的 vuejs 3 不调用 onUpdated

Question

我在 Vuejs3 Composition API 中使用 onUpdated 生命周期挂钩时遇到问题。更新反应值时不会调用它。我用一个非常简单的应用程序重现了这个问题。它有一个子组件：

<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>

那么这个组件被应用使用：

<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>

但是在app中点击button时，虽然显示了“Child Component”的文字，证明调用了render函数，但是并没有执行onUpdated回调。

这一定与渲染函数的调用方式或条件渲染有关，因为如果我在模板中使用 v-if 代替，它可以正常工作。但就我而言，我确实需要一个显式渲染函数。

有人可以帮忙吗？

Answer 1

这可能是 <script setup> 中的错误，因为相同的代码在 setup() 中有效。

如果您需要使用 onUpdated():

，解决方法是切换到 setup()

<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>

demo

带有渲染功能的 vuejs 3 不调用 onUpdated

onUpdated is not called with vuejs 3 with render function

javascript

vue.js

vuejs3

vue-composition-api

vue-script-setup