Svelte组件如何动态声明Props及对应响应式语句？

问题场景 #

我的Svelte组件包含大量Props，示例如下：

export let color;
export let width;
export let orientation;
export let highlighted;
export let showFocus;
export let animate;
// 还有10个类似Props

每个Props都对应一条重复的响应式语句：

$: update({color: color});
$: update({width: width});
$: update({orientation: orientation});
// ... 对应其他Props的语句

我希望仅通过一个数组统一管理所有Props，动态生成这些Props声明和响应式语句，且必须支持通过<MyComponent color={...}>传入Props，以及myComponent.color直接访问Props，因此用键值对象存储Props的方案不可行。

可行解决方案 #

方案1：统一管理Props数组 + 批量响应式处理 #

这种方案保留手动声明Props的方式（保证类型检查和访问兼容性），但用单个响应式语句替代重复的多条语句，减少代码冗余：

// 统一维护Props列表
const propList = ['color', 'width', 'orientation', 'highlighted', 'showFocus', 'animate'];

// 批量声明Props（可借助编辑器快速生成，比如基于数组复制粘贴或使用代码片段）
export let color;
export let width;
export let orientation;
export let highlighted;
export let showFocus;
export let animate;
// ... 补充剩余10个Props

// 单个响应式语句处理所有Props变化
$: {
  const updatePayload = {};
  propList.forEach(prop => {
    updatePayload[prop] = this[prop];
  });
  update(updatePayload);
}

优点：保留Svelte原生Props的类型检查（TypeScript场景友好），访问方式完全符合需求；缺点：仍需手动声明每个Props，但可借助编辑器工具快速完成。

方案2：利用Object.defineProperty实现完全动态Props #

这种方案无需手动声明每个export let，完全基于数组生成Props，同时兼容外部传入和实例访问：

const propList = ['color', 'width', 'orientation', 'highlighted', 'showFocus', 'animate'];

// 动态定义组件实例的Props属性，自带更新逻辑
propList.forEach(prop => {
  let currentValue = $$props[prop];
  Object.defineProperty(this, prop, {
    get() { return currentValue; },
    set(newValue) {
      if (newValue !== currentValue) {
        currentValue = newValue;
        update({ [prop]: currentValue });
      }
    },
    enumerable: true
  });
});

// 监听外部传入Props的变化，同步到实例属性
$: propList.forEach(prop => {
  if ($$props[prop] !== this[prop]) {
    this[prop] = $$props[prop];
  }
});

优点：完全基于数组动态管理Props，无需重复写export let；缺点：丢失Svelte原生的Props类型检查能力，TypeScript场景需要额外处理类型定义。

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