Vue.js プロジェクト エラー: 初期化前に変数にアクセスできません

Question

現在、Vue 3 を使用して Twitter クローンを開発しています。同じソースコードはここにあります。

HomeView.vueコードは次のとおりです。

<コード><テンプレート>
  <div class="ホーム">
    <ツイート
      v-for=「ツイート内でツイート」
      :key="ツイート._id"
      :tweet="ツイート" />
  </div>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします。
'../components/Tweet' からツイートをインポートします。
「../tweets」からツイートをインポートします。

デフォルトのエクスポート {
  設定 （） {
    const ツイート = ref(ツイート);

    戻る {
      ツイート、
      つぶやき
    }
  }
}
</スクリプト>
</code>

しかし、同じ操作を実行すると、開発者コンソールに次のエラーが表示されます。

キャッチされません (約束内) ReferenceError: 初期化前に「ツイート」にアクセスできません

Answer 1

コンポジション API の専門家ではありませんが、ライフサイクルを見てみたいと思いました。ツイートは直接使用できないため、このように直接使用することはできません。その後、それらは満たされます。

テンプレートは同期されていますが、(元々) 未定義の場合はアクセスできないため、エラーが発生します。

を作成することが解決策になる可能性がありますが、そうでない場合は watch と suspense を使用する可能性がありますが、わかりません。

PS: ここにはさらに 2 つの tweets 変数があり、エラーが発生する可能性があります。注意してください。