vue keep-alive里多个页面复用组件，数据更新无法更新视图

Question

请教一个问题
当改变了企业名称以后，重新获取数据无法渲染到页面

数据是直接在子组件调取接口获取的，然后打印出来没有问题，也是直接在子组件显示的，本地存储给父组件只是为了其他接口使用，现在问题是子组件自己的显示和数据层里的数据不一致，比如我打印this.selectCompany.name是123，但是子组件的上面显示的是456，以下代码都是子组件里的template和script

以上的数据获取和显示都在子组件自己内部

**红框里是子组件的显示区域，下面打印出来的是子组件data的值，目前就是子组件data的值和显示对不上，上面打开的tag都引入了这个子组件，并且都用了keep-alive缓存
**

这是子组件的上半部分代码，后面省略了一部份不重要的

<template>
  <div class="content">
    <div class="company">
      <div class="companyname">
       
        <img
          alt=""
          class="logo-img"
          :src="selectCompany.Logo"
          v-show="selectCompany.Logo"
        />
        <span>{{ selectCompany.Name }}</span>
      </div>

这里是获取数据的地方，打印出来的值已经改变了，但是页面数据没有改变

  //更新数据
    updateItem(res, selectCompany) {
      //目前只有activated传key，代表当前选中不在第一页
      let updateItem = null;
      if (!selectCompany || selectCompany === "undefined") {
        return;
      }
      res.data.Data.data.forEach(item => {
        if (item.Id !== JSON.parse(selectCompany).Id) {
          return;
        }
        updateItem = item;
      });

      if (updateItem) {
        this.$nextTick(() => {
          this.selectCompany = updateItem;
          this.$set(this.selectCompany, "Name", updateItem.Name);
          this.$forceUpdate()
          console.log(this.selectCompany);
        });
        localStorage.setItem("selectCompany", JSON.stringify(updateItem));
      }
    },

这是打印的结果

我看到在浏览器的vue插件里，这个值也没有改变

目前已经试过router-view加上key值，父子组件都使用强制更新，子组件内部加上v-if，然后$set,nexttick,强制更新，都不行

Answer 1

参考GPT和自己的思路：可能是因为selectCompany是在keep-alive缓存中的组件中进行了更改，而不是在新创建的组件中进行更改。这样就无法触发组件的重新渲染。你可以尝试在activated生命周期钩子中手动更新数据，这样每次从缓存中激活组件时都会触发更新。

例如，你可以添加以下代码来更新数据：

export default {
  activated() {
    // 从localStorage中获取最新的选中企业信息
    const selectCompany = JSON.parse(localStorage.getItem("selectCompany"));
    // 如果选中的企业信息与当前缓存中的不同，则更新数据
    if (selectCompany && selectCompany.Id !== this.selectCompany.Id) {
      this.selectCompany = selectCompany;
    }
  },
  // ...
}

这里，我们在activated钩子中检查选中的企业信息是否与当前缓存中的相同。如果不同，就更新selectCompany的值。这样，每次从缓存中激活组件时，都会触发数据的更新和重新渲染。

另外，不建议在组件中使用$forceUpdate和$nextTick，因为这样可能会导致代码更加复杂，难以维护。如果需要更新数据，请使用Vue的响应式数据机制，或者手动调用组件的$forceUpdate方法来触发重新渲染。

Answer 2

“Devil组”引证GPT后的撰写：
代码中看不出问题。
以下可能的解决方案和建议：

• 确保数据已经正确地更新并且传递到了子组件中。可以在子组件中添加一个计算属性或者在模板中直接显示数据来检查数据是否已经被正确传递。

• 如果尝试了多种更新视图的方法，但是都没有成功，那么可能是组件之间的通信出现了问题。建议使用事件总线或 Vuex 来管理组件之间的数据通信，以确保数据能够正确地传递和更新。

• 可以尝试在父组件中使用 watch 监听数据的变化，并在数据变化时手动更新子组件的数据。这样可以确保子组件中的数据始终与父组件中的数据保持同步。

• 如果用了缓存技术（如 localStorage），则可能需要在重新获取数据时手动清除缓存，以确保获得的是最新的数据。

Answer 3

根据你提供的代码和描述，可能是以下几个原因导致子组件显示的数据和数据层里的数据不一致：

1.数据没有正确绑定：确保在父组件中传递给子组件的数据和子组件中使用的数据变量名一致，且已正确绑定。

2.异步数据更新的问题：子组件的数据更新是异步的，所以当你在子组件中使用'this.selectCompany

3.数据类型问题：检查传递的数据类型是否正确。在子组件中使用'{{ }}

4.渲染时机问题：检查子组件的渲染时机是否正确。如果在子组件渲染之前父组件没有正确更新数据，可能会导致子组件显示错误的数据。

综上所述，建议检查子组件中是否正确绑定了数据、是否等待异步数据更新完成、数据类型是否正确，以及是否在正确的时机渲染子组件。

Answer 4

 
  //更新数据
    updateItem(res, selectCompany) {
      //目前只有activated传key，代表当前选中不在第一页
      let updateItem = null;
      if (!selectCompany || selectCompany === "undefined") {
        return;
      }
      res.data.Data.data.forEach(item => {
        if (item.Id !== JSON.parse(selectCompany).Id) {
          return;
        }
        updateItem = item;
      });
 
      if (updateItem) {
        this.$nextTick(() => {
          this.selectCompany = JSON.parse(JSON.stringify(updateItem)) // 改成这样试试或者  {...updateItem}解构对象
          // this.$set(this.selectCompany, "Name", updateItem.Name);
          // this.$forceUpdate()
          console.log(this.selectCompany);
        });
        localStorage.setItem("selectCompany", JSON.stringify(updateItem));
      }
    },
 

Answer 5

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这篇文章：解决vue单页使用keep-alive页面返回不刷新的问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^