Vue2中props变化后Visual组件不重新渲染的问题求助

可能的原因及解决步骤： #

1. 检查key属性的更新逻辑
   父组件给<Visual>绑定了:key='visIdx'，Vue会通过key判断是否需要复用组件实例。如果visIdx没有随着vis或visualType的变化而更新，Vue会复用原有组件实例，即使props变化也可能不触发重渲染。

   • 确保visIdx在vis或visualType改变时同步更新，比如将visIdx设置为基于vis的唯一标识（如JSON.stringify(vis)，注意大对象场景的性能问题），或者当props变化时手动更新visIdx的数值。

2. 单独监听具体props而非$props
   直接监听$props可能存在检测盲区，改为单独监听每个需要响应的props：

   export default class Visual extends BaseMixin {
     @Prop({default: {}}) visualType;
     @Prop() vis;
     @Prop({default: 3}) visIdx;
   
     mounted() {
       console.log(this.vis)
     }
   
     @Watch('vis', {deep:true, immediate: true})
     onVisChanged(val) {
       console.log('vis updated:', val)
       // 若需要强制更新可临时添加：this.$forceUpdate()
     }
   
     @Watch('visualType', {deep:true, immediate: true})
     onVisualTypeChanged(val) {
       console.log('visualType updated:', val)
     }
   }
   

3. 确认父组件中props的修改是响应式的
   如果vis是引用类型（对象/数组），父组件修改其内部属性时，必须通过Vue的响应式方式：

   • 错误示例：直接修改新增属性未触发响应式：this.vis.someProp = 'newVal'（新增属性需用Vue.set(this.vis, 'someProp', 'newVal')）
   • 正确示例：替换整个引用触发响应式：this.vis = {...this.vis, someProp: 'newVal'}

4. 排查BaseMixin的影响
   检查BaseMixin中是否存在干扰组件更新的逻辑：

   • 是否重写了beforeUpdate/updated钩子
   • 是否自定义了shouldComponentUpdate（Vue2）或使用了memo相关逻辑（Vue3）
   • 是否有其他watch或生命周期钩子覆盖了props的响应逻辑

5. 临时方案：强制组件更新
   如果以上方法都无法解决，可在watch回调中强制组件重渲染（仅作为临时 workaround，建议优先找到根本原因）：

   @Watch('vis', {deep:true, immediate: true})
   onVisChanged(val) {
     this.$forceUpdate()
   }
   

内容的提问来源于stack exchange，提问作者Даксин