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 } from '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 变量，这可能会导致一些错误，请小心。