23 câu hỏi đã được viết

0

<script>
  import { delayRender, lifecycle } from "./lifecycle.js";
  import Something from "./Something.svelte";

  let done = delayRender();
  lifecycle();
</script>

{#if done}
  <h1>Hello Lifecycle!</h1>
{/if}

<Something />

import {
  afterUpdate,
  beforeUpdate,
  onDestroy,
  onMount
} from "svelte"
import {
  writable
} from "svelte/store"

export function lifecycle() {
  onMount(() => {
    console.log("Mounted?")
  })
  onDestroy(() => {
    console.log("Before destroy?")
  })
  beforeUpdate(() => {
    console.log("Before update?")
  })
  afterUpdate(() => {
    console.log("After update?")
  })
}

export function delayRender(delay = 3000) {
  let render = writable(false)
  onMount(() => {
    setTimeout(() => {
      // $render = true
      console.log(render) // set, update, subscribe
      render.set(true)
    }, delay)
  })
  return render
}

<script>
  import { delayRender } from "./lifecycle.js";

  let done = delayRender(1000);
</script>

{#if $done}
  <h1>something...</h1>
{/if}