Vue.js專案錯誤：初始化前無法存取變數

Question

我目前正在使用 Vue 3 開發 Twitter 克隆。可以在此處找到相同的原始程式碼。

HomeView.vue的程式碼如下：

<code><template>
  <div class="home">
    <Tweet
      v-for="tweet in tweets"
      :key="tweet._id"
      :tweet="tweet" />
  </div>
</template>

<script>
import { ref } 從 'vue';
import Tweet from '../components/Tweet';
import tweets from '../tweets';

export default {
  setup () {
    const tweets = ref(tweets);

    return {
      tweets,
      Tweet
    }
  }
}
</script>
</code>

但是在執行相同的操作後，我在開發人員的控制台中收到以下錯誤。

Uncaught (in promise) ReferenceError: Cannot access 'tweets' before initialization

Answer 1

不是組合 API 專家，但我想看看生命週期，你不能像這樣直接使用推文，因為它們不能直接使用。之後它們就會被填充。

雖然您的範本是同步的，但它會出錯，因為當它（最初）未定義時它無法存取某些內容。

製作

可能是解決方案，否則可能是與 watch 和 懸念，不確定。

PS：這裡還有 2 個 tweets 變量，這可能會導致一些錯誤，請小心。