Svelte构造函数实例化组件时父组件props变更不触发更新

这是Svelte的预期设计行为 #

模板里直接声明的组件能自动响应props更新，本质是Svelte编译器在编译阶段做了处理：父组件里的响应式变量变化时，编译器会自动生成代码调用对应子组件实例的$set方法，把最新值传过去。
而手动调用构造函数创建的组件实例，完全走的是命令式创建逻辑，不在模板的编译优化链路里，Svelte不会自动给它绑定父级变量的更新监听。初始化时传的props只在组件第一次渲染时生效，后续父组件变量变了不会自动同步，这是框架的明确设计，不是bug。
组件构造函数本身也没有提供自动同步props的配置项——命令式创建实例的设计目的就是把控制权完全交给开发者，所有后续状态更新都要开发者主动触发。

更简洁的自动同步方案 #

不用零散写定时器手动调$set，直接用Svelte自带的响应式语句$:就能实现自动同步，只要依赖的变量变了，$set就会自动执行，逻辑集中维护也方便：

<script>
    import Nested from './Nested.svelte';
    
    let name = 'world';
    setTimeout(() => { name = 'there'; }, 2000);

    // 手动实例化组件
    const component = new Nested({
        target: document.body,
        props: { name },
    });

    // 响应式语句自动同步props
    $: component.$set({ name })
</script>

<!-- 模板声明的组件保持原有写法即可 -->
<Nested name="{name}"/>

如果要同步的props比较多，可以把所有props收敛到一个响应式对象里，同步代码更精简：

<script>
    import Nested from './Nested.svelte';
    
    // 统一管理要传递的props
    let componentProps = { name: 'world' };
    setTimeout(() => { componentProps.name = 'there'; }, 2000);

    const component = new Nested({
        target: document.body,
        props: componentProps,
    });

    // 一行代码同步所有props
    $: component.$set(componentProps)
</script>

如果你用的是Svelte 5的Runes模式，把上面的响应式语句换成$effect(() => component.$set({ name }))就能实现一样的效果。

补充一点：日常业务开发优先用模板声明的方式引入组件，手动实例化更适合全局弹窗、消息提示这类需要脱离当前组件DOM层级挂载的场景，这类场景本身也很少需要和父组件做高频的状态同步。

内容的提问来源于stack exchange，提问作者matpen