hydration-strat-idle.html 886 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <script src="../../dist/vue.global.js"></script>
  2. <div id="app"><button>0</button></div>
  3. <script>
  4. window.isHydrated = false
  5. const {
  6. createSSRApp,
  7. defineAsyncComponent,
  8. h,
  9. ref,
  10. onMounted,
  11. hydrateOnIdle,
  12. } = Vue
  13. const Comp = {
  14. setup() {
  15. const count = ref(0)
  16. onMounted(() => {
  17. console.log('hydrated')
  18. window.isHydrated = true
  19. })
  20. return () => h('button', { onClick: () => count.value++ }, count.value)
  21. },
  22. }
  23. const AsyncComp = defineAsyncComponent({
  24. loader: () =>
  25. new Promise(resolve => {
  26. setTimeout(() => {
  27. console.log('resolve')
  28. resolve(Comp)
  29. requestIdleCallback(() => {
  30. console.log('busy')
  31. })
  32. }, 10)
  33. }),
  34. hydrate: hydrateOnIdle(),
  35. })
  36. createSSRApp({
  37. render: () => h(AsyncComp),
  38. }).mount('#app')
  39. </script>