|
|
@@ -2,7 +2,11 @@
|
|
|
|
|
|
<div>click to hydrate</div>
|
|
|
<div id="app"><button>0</button></div>
|
|
|
-<style>body { margin: 0 }</style>
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+</style>
|
|
|
|
|
|
<script>
|
|
|
const isFragment = location.search.includes('?fragment')
|
|
|
@@ -12,7 +16,14 @@
|
|
|
}
|
|
|
|
|
|
window.isHydrated = false
|
|
|
- const { createSSRApp, defineAsyncComponent, h, ref, onMounted, hydrateOnInteraction } = Vue
|
|
|
+ const {
|
|
|
+ createSSRApp,
|
|
|
+ defineAsyncComponent,
|
|
|
+ h,
|
|
|
+ ref,
|
|
|
+ onMounted,
|
|
|
+ hydrateOnInteraction,
|
|
|
+ } = Vue
|
|
|
|
|
|
const Comp = {
|
|
|
setup() {
|
|
|
@@ -22,7 +33,11 @@
|
|
|
window.isHydrated = true
|
|
|
})
|
|
|
return () => {
|
|
|
- const button = h('button', { onClick: () => count.value++ }, count.value)
|
|
|
+ const button = h(
|
|
|
+ 'button',
|
|
|
+ { onClick: () => count.value++ },
|
|
|
+ count.value,
|
|
|
+ )
|
|
|
if (isFragment) {
|
|
|
return [[h('span', 'one')], button, h('span', 'two')]
|
|
|
} else {
|
|
|
@@ -34,7 +49,7 @@
|
|
|
|
|
|
const AsyncComp = defineAsyncComponent({
|
|
|
loader: () => Promise.resolve(Comp),
|
|
|
- hydrate: hydrateOnInteraction(['click', 'wheel'])
|
|
|
+ hydrate: hydrateOnInteraction(['click', 'wheel']),
|
|
|
})
|
|
|
|
|
|
createSSRApp({
|
|
|
@@ -43,6 +58,6 @@
|
|
|
window.isRootMounted = true
|
|
|
})
|
|
|
return () => h(AsyncComp)
|
|
|
- }
|
|
|
+ },
|
|
|
}).mount('#app')
|
|
|
</script>
|