Vue父组件Props变化时子组件未触发更新重渲染问题排查求解

核心问题根因 #

• 父组件将更新groupCodeList的逻辑写在updated钩子中，而Vuex返回的groupCodes是计算属性，未被父组件模板或其他响应式依赖触发时，父组件不会执行updated钩子，数组更新逻辑从未运行
• 父、子组件模板中绑定属性时多余的this关键字会打断Vue的响应式依赖追踪，导致属性更新后无法通知到关联组件

具体修复步骤 #

1. 清理模板中冗余的this关键字 #

父组件模板修改：

<template>
  <div class="loginPanel">
    <div className="col">
      <BaseSelect
        v-model="sourceGroup"
        :options="groupCodeList"
        label="Source Group"
        :emit-event="'sourceGroupSelected'"
        @sourceGroupSelected="sourceGroupSelected"
      />
    </div>
    <div className="col mt-4">
      <button type="submit">Search</button>
    </div>
  </div>
</template>

子组件模板修改：

<template>
  <label v-if="label">{{ label }}</label>
  <select class="field" :value="modelValue" @change="onChange($event)">
    <option disabled v-if="label" value="">Select a {{ label }}...</option>
    <option disabled v-if="!label" value="">Select an option...</option>
    <option
      v-for="option in options"
      :value="option.val"
      :key="option.key"
      :selected="option.val === modelValue"
    >
      {{ option.name }}
    </option>
  </select>
</template>

2. 替换updated钩子逻辑为计算属性/监听器 #

推荐优先用计算属性实现，无需手动维护状态，自动响应Vuex数据变化：
父组件js部分修改：

import BaseSelect from './BaseSelect'
export default {
  name: 'SelectSourceGroup',
  components: { BaseSelect },
  data() {
    return {
      selectedSourceGroup: '',
      sourceGroup: '',
    }
  },
  methods: {
    sourceGroupSelected(value) {
      console.log(value)
    },
  },
  computed: {
    groupCodes() {
      return this.$store.state.groupCodes || []
    },
    // 直接将groupCodeList改为计算属性，自动映射store数据
    groupCodeList() {
      return this.groupCodes.map(group => {
        const { group_code, group_name } = group
        return {
          key: group_code,
          val: group_code,
          name: group_name,
        }
      })
    }
  },
  created() {
    if (!this.$store.state.groupCodes) {
      this.$store.dispatch('getAllGroupCodes')
    }
  },
  // 原有updated钩子直接删除即可
}

如果需要保留手动维护groupCodeList的逻辑，用监听器替代updated钩子：

export default {
  // 原有配置保留
  data() {
    return {
      selectedSourceGroup: '',
      sourceGroup: '',
      groupCodeList: [],
    }
  },
  watch: {
    groupCodes: {
      // 初始化时立即执行一次
      immediate: true,
      handler(newVal) {
        if (this.groupCodeList.length > 0 || !newVal) return
        this.groupCodeList = newVal.map(group => ({
          key: group.group_code,
          val: group.group_code,
          name: group.group_name,
        }))
      }
    }
  }
}

修改完成后，store数据更新时groupCodeList会自动触发响应式更新，子组件的optionsProp会同步变化，updated钩子也会正常触发。

内容的提问来源于stack exchange，提问作者Adam Roberts