Svelte响应式多依赖处理：如何等待所有依赖就绪？

方案1：集中解构+响应式块统一处理依赖检查 #

把所有依赖变量集中解构并赋予默认值，再在响应式块里先判断核心依赖是否齐全，后续逻辑就不用到处写?.和??了：

<script>
  export let node;
  export let dimensionListing;
  export let data;
  let entityName, entityType, displayDimensions;

  $: {
    // 解构并给默认值，避免后续访问报错
    const { synonyms = {}, entityNameSynonym, entityTypeSynonym, entityAttributes = [] } = node ?? {};
    const dimList = dimensionListing ?? [];
    const dataset = data ?? {};

    // 核心依赖全部就绪才执行逻辑
    if (node && dimList.length && dataset) {
      // 计算entityName
      const nameSynonymVal = synonyms[entityNameSynonym];
      entityName = dimList.includes(nameSynonymVal) ? getAttr(dataset, nameSynonymVal) : undefined;

      // 计算entityType
      const typeSynonymVal = synonyms[entityTypeSynonym];
      entityType = dimList.includes(typeSynonymVal) ? getAttr(dataset, typeSynonymVal) : undefined;

      // 计算displayDimensions
      displayDimensions = entityAttributes.filter(e => {
        const isInDimList = dimList.includes(e.columnName);
        const isNotEntityName = e.columnName !== nameSynonymVal;
        const isNotEntityType = !(entityName && e.columnName === typeSynonymVal);
        const hasData = dataset[e.columnName];
        return isInDimList && isNotEntityName && isNotEntityType && hasData;
      });
    } else {
      // 依赖未就绪时重置值
      entityName = entityType = displayDimensions = undefined;
    }
  }
</script>

方案2：封装通用工具函数简化依赖检查 #

写一个可复用的工具函数，只有当所有传入的依赖都不为null/undefined时，才执行回调逻辑：

<script>
  export let node;
  export let dimensionListing;
  export let data;
  let entityName, entityType, displayDimensions;

  // 通用工具：等待所有依赖就绪
  const whenAllReady = (deps, callback) => {
    if (deps.every(dep => dep != null)) {
      return callback();
    }
    return undefined;
  };

  // 用工具函数处理响应式逻辑
  $: entityName = whenAllReady([dimensionListing, node], () => {
    const { synonyms = {}, entityNameSynonym } = node;
    const synonymVal = synonyms[entityNameSynonym];
    return dimensionListing.includes(synonymVal) ? getAttr(data, synonymVal) : undefined;
  });

  $: entityType = whenAllReady([dimensionListing, node], () => {
    const { synonyms = {}, entityTypeSynonym } = node;
    const synonymVal = synonyms[entityTypeSynonym];
    return dimensionListing.includes(synonymVal) ? getAttr(data, synonymVal) : undefined;
  });

  $: displayDimensions = whenAllReady([node, dimensionListing, data, entityName], () => {
    const { synonyms = {}, entityNameSynonym, entityTypeSynonym, entityAttributes } = node;
    const nameSynonymVal = synonyms[entityNameSynonym];
    const typeSynonymVal = synonyms[entityTypeSynonym];
    return entityAttributes.filter(e => 
      dimensionListing.includes(e.columnName) &&
      e.columnName !== nameSynonymVal &&
      !(entityName && e.columnName === typeSynonymVal) &&
      data[e.columnName]
    );
  });
</script>

方案3：响应式声明分组递进 #

把关联的响应式逻辑拆分成递进的块，确保前面的变量就绪后再执行后面的计算：

<script>
  export let node;
  export let dimensionListing;
  export let data;
  let entityName, entityType, displayDimensions;

  // 先确保node和dimensionListing就绪，再计算entityName/entityType
  $: if (node && dimensionListing) {
    const { synonyms = {}, entityNameSynonym, entityTypeSynonym } = node;
    const nameSynonymVal = synonyms[entityNameSynonym];
    entityName = dimensionListing.includes(nameSynonymVal) ? getAttr(data, nameSynonymVal) : undefined;

    const typeSynonymVal = synonyms[entityTypeSynonym];
    entityType = dimensionListing.includes(typeSynonymVal) ? getAttr(data, typeSynonymVal) : undefined;
  }

  // 等待所有依赖就绪后计算displayDimensions
  $: if (node && dimensionListing && data && entityName) {
    const { synonyms = {}, entityNameSynonym, entityTypeSynonym, entityAttributes } = node;
    const nameSynonymVal = synonyms[entityNameSynonym];
    const typeSynonymVal = synonyms[entityTypeSynonym];
    displayDimensions = entityAttributes.filter(e => 
      dimensionListing.includes(e.columnName) &&
      e.columnName !== nameSynonymVal &&
      !(entityName && e.columnName === typeSynonymVal) &&
      data[e.columnName]
    );
  }
</script>

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