javascript - Svelte - 如何处理生命周期中的 Prop 更新？

Question

如果父组件在生命周期内更新传递给子组件的 prop 的值，子组件如何在其自己的生命周期中使用该 prop 的最新值？

这是一个示例，其中 prop 值在子组件的生命周期中未定义:

App.svelte

<script>
    import { onMount } from 'svelte';
    import Nested from './Nested.svelte';

    let name;

    onMount(() => {
        name = "world";
    })
</script>

<h1>Hello <Nested name="{name}" /></h1>

嵌套.svelte

<script>
    import { onMount, afterUpdate } from 'svelte';

    export let name;

    onMount(() => {
        console.log("mount name:", name);
    })

    afterUpdate(() => {
        console.log("after update name:", name);
    })
</script>

<span>{name}</span>

https://svelte.dev/repl/65ac3d9c3913408bad459e2ad2a27d8e?version=3.4.2

如果我等待tick，最新的值在生命周期中可用，但我不确定这是否是正确的处理方式:

App.svelte

<script>
    import { onMount } from 'svelte';
    import Nested from './Nested.svelte';

    let name;

    onMount(() => {
        name = "world";
    })
</script>

<h1>Hello <Nested name="{name}" /></h1>

嵌套.svelte

<script>
    import { onMount, afterUpdate, tick } from 'svelte';

    export let name;

    onMount(async () => {
        await tick();
        console.log("mount name:", name);
    })

    afterUpdate(async () => {
        await tick();
        console.log("after update name:", name);
    })
</script>

<span>{name}</span>

https://svelte.dev/repl/9e66f312a17d41a8adf6e3e3b95c5327?version=3.4.2

Answer 1

没有任何人会像您那样在onMount Hook 中同步设置状态，因为如果您希望它在挂载时就在那里，您应该在 let name = 'world';

中设置它

合乎逻辑的情况是在 onMount Hook 中设置状态异步(例如，发出 ajax 请求并将 ajax 响应值设置为状态)。

如果您尝试模拟这样的异步操作

// App.svelte
onMount(() => {
    setTimeout(()=>{
        name = "world";
    },0)
})

无需使用 tick() 即可运行。 afterUpdate Hook 按预期接收更新后的值。

https://svelte.dev/repl/9e0411ed66e34e2e8ac1937e41b2709a?version=3.4.2