Vue JS组件模板未随数据更新

Question

我的一些Vue js组件中存在一个奇怪的问题，请让我解释一下。我只有在数据初始化后才渲染组件模板，如下所示：

<template>
  <div>
    <div v-if='!isLoading'> 
      <!-- content -->
    </div>
    <div v-else>...</div>
  </div>
</template>

在此组件的创建方法中，我从商店中获取了一些数据，并像这样将isLoading设置为false。

data() {
  return {
    variable: null,
    isLoading: true,
  }
},
created() {
  this.variable = this.$store.getters['someModule/someGetter']
  this.isLoading = false
}

这是发生奇怪行为的地方。即使在创建的方法中将isLoading变量更新为false，组件模板也没有更新。

当我在创建的方法的末尾将isLoading变量记录到控制台时，它记录为false，就像我对其进行设置一样。但是当我在Vue js工具中检查isLoading变量时，它仍然设置为true ...

可以说此组件在'/ content'中呈现。当我将路由从“ /”更改为“ / content”时，会发生这种奇怪的行为。当我在“ /内容”路径上刷新应用程序时，不会发生这种情况。当我从“ /”转到“ / other-content”然后再到“ / content”时，也不会发生。

对于为什么会发生这种情况的任何想法将不胜感激。

谢谢你，祝你有美好的一天！

Answer 1

在您的情况下，mounted和created之间存在细微的差别，因为您要操作DOM，因此应使用mounted生命周期挂钩。 This的答案将阐述两种生命周期方法之间的差异。

Answer 2

这是您尝试执行的操作的有效示例：https://codesandbox.io/s/blissful-field-kjufc?file=/src/App.vue

代码的有趣部分在这里：

async created() {
  const response = await fetch("https://jsonplaceholder.typicode.com/photos");
  const json = await response.json();
  console.log("done loading the data");
  if (json) this.isLoading = false;
},

您可以转到网络选项卡并选择“慢速 3G”以模拟慢速连接。这样，您将看到 VueJS 徽标在我们获取所有 5000 张照片之前不会显示。

如果它没有帮助，我们肯定需要更多细节，例如 vue devtools 调试或复制。