Vue组件二次渲染时传入子组件ListView的props为空如何解决

• Vue组件的created生命周期仅在组件实例首次创建时触发一次，路由切换时如果父/子组件被框架复用，不会重复执行该钩子，写在父组件created里的数据拉取逻辑自然不会二次触发。
• 之前绑定的:key='$route.name'不生效，核心原因是切换的动态菜单如果对应路由name值相同（比如只是动态参数变化、或者菜单配置重名），key值没有发生变化，Vue会判定为同一个组件实例直接复用，不会触发重建。
• forceUpdate仅会强制当前组件触发视图重渲染，既不会让组件重新走生命周期，也不会清除子组件内部缓存的旧状态，对这个场景完全无效。

方案1：修正key规则 + 优化父组件拉数逻辑（改造成本最低） #

第一步先修改ListView的key绑定，用带全路径的唯一值作为key，保证切换菜单时key必然变化，触发子组件重建：

<div>
  <ListView :key='$route.fullPath'
      :domainName="domainName" 
      :metadataName="metadataName"
      :entityList="entityList"
      :metadataList="metadataList"
      :showBooleanAsFlag="true"
      :showButtonAddEntity="true"
    />
</div>

第二步优化路由监听和拉数逻辑，解决时序问题和旧数据残留问题：

// 替换原有的watch和loadSettings部分
methods: {
  print(data){
    console.log('PRINT ', data)
  },
  async loadSettings(){
    const arrayOfRoute = this.$route.name.split('-');
    this.domainName = getCapitalizeFirstLetter(arrayOfRoute[1])
    this.metadataName = getCapitalizeFirstLetter(arrayOfRoute[2])
    // 并行请求缩短加载时长，避免混用await和.then导致的时序异常
    const [metadataRes, entityRes] = await Promise.all([
      restService.getMetadata(this.domainName, this.metadataName),
      restService.getEntity(this.domainName, this.metadataName)
    ])
    this.metadataList = metadataRes.data.result.metadata;
    this.entityList = entityRes.data.result.entity;
  }
},
watch:{
  '$route': {
    async handler(to, from){
      // 切换路由先清空旧数据，避免子组件拿到上一轮的残留值
      this.metadataList = []
      this.entityList = []
      this.domainName = ''
      this.metadataName = ''
      await this.loadSettings();
    }
  }
},
created(){
  this.loadSettings();
}

方案2：子组件增加props监听（长期最稳妥，不依赖组件重建） #

如果改完父组件逻辑还是存在props不同步的问题，说明ListView组件内部仅在自身created钩子读取了一次props值，后续props更新没有同步触发内部逻辑更新。直接修改ListView组件，把初始化逻辑抽成独立方法，监听props变化重新执行即可：

// ListView.vue 内部逻辑示例
export default {
  props: {
    domainName: String,
    metadataName: String,
    entityList: Array,
    metadataList: Array,
    showBooleanAsFlag: Boolean,
    showButtonAddEntity: Boolean
  },
  watch: {
    // 监听核心入参变化，重新执行初始化
    domainName: {
      immediate: true,
      handler() {
        this.initView()
      }
    },
    metadataName() {
      this.initView()
    }
  },
  methods: {
    initView() {
      // 将原来写在ListView的created钩子中的所有初始化逻辑挪到这里
      // 配置immediate: true后，首次加载、后续参数变化都会自动执行该逻辑
    }
  }
}

注意：不要依赖forceUpdate解决状态同步问题，该API仅触发视图重绘，不会重置组件内部状态、也不会重跑生命周期逻辑。

内容的提问来源于stack exchange，提问作者Kelvyn Cavalcante