vuejs/vue-vapor

The onUpdated hook is not triggered across components.

ubugeeei opened this issue · 1 comments

Overview

<!-- index.vue -->
<script lang="ts">
import type { InjectionKey, Ref } from 'vue/vapor'
export const ContInjectionKey: InjectionKey<Ref<number>> =
  Symbol('ContInjectionKey')
</script>

<script setup lang="ts">
import { onUpdated, ref, provide } from 'vue/vapor'
import Child from './child.vue'

const count = ref(0)
provide(ContInjectionKey, count)
onUpdated(() => console.log('parent: updated'))
</script>

<template>
  <button type="button" @click="count++">
    count = {{ count }} + 1 (parent)
  </button>
  <Child />
</template>
<!-- child.vue -->
<script setup lang="ts">
import { onUpdated, inject } from 'vue/vapor'
import { ContInjectionKey } from './index.vue'

const count = inject(ContInjectionKey)!
onUpdated(() => console.log('child: updated')) // Does not working!
</script>

<template>
  <button type="button" @click="count++">
    count = {{ count }} + 1 (child)
  </button>
</template>

Reproduction

https://github.com/vuejs/core-vapor/tree/ubugeeei/reproduction/136/playground/src/reproduction/136

const job: SchedulerJob = () => {
  // 0 true
  // 1 false
  console.log(
    instance?.uid,
    instance?.isMounted,
  )