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方法来触发重新渲染。