Vue js组件模板未随数据更新答案

【问题标题】：Vue js component template not updating with dataVue js组件模板未随数据更新
【发布时间】：2020-10-08 07:45:18
【问题描述】：

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

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

在这个组件的 created 方法中，我从 store 中获取了一些数据并将 isLoading 设置为 false ，就像这样。

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

这就是奇怪行为发生的地方。即使我在 created 方法中将 isLoading 变量更新为 false，组件模板也不会更新。

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

假设这个组件在“/content”中呈现。当我将路由从“/”更改为“/content”时，就会发生这种奇怪的行为。当我在“/内容”路线上刷新应用程序时，这不会发生。当我从 '/' 到 '/other-content' 再到 '/content' 时，它也不会发生。

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

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

【问题讨论】：

你能在这个created钩子里放一个console.log并检查它是否总是被调用吗？
您为什么不尝试使用mounted 生命周期挂钩？
您是从 API 获取数据吗？如果是这种情况，async/await 将在 created() 挂钩上很方便。

标签： vue.js vuejs2 vuex vue-router

【解决方案1】：

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

【讨论】：

【解决方案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”来模拟慢速连接。这样，在我们获取所有 5000 张照片之前，您将看到 VueJS 徽标不会显示。

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

【讨论】：