Vue3中修改props嵌套属性后模板未触发重新渲染是什么原因？

核心问题原因 #

• 违反Vue单向数据流设计规范：Vue要求props只能由父组件修改，子组件不允许直接修改传入的prop值。如果prop是基础类型，直接修改会直接抛出错误；即使是像story这样的引用类型对象，直接修改它的属性虽然不会立刻报错，但父组件重新渲染时修改的值会被覆盖，也可能出现响应式丢失不触发视图更新的情况。
• 响应式属性缺失：如果父组件初始化story对象时没有预先定义score属性，Vue的响应式系统不会对后续新增的score属性做监听，直接赋值也不会触发视图更新。

推荐解决方式 #

优先遵循单向数据流规范，子组件通过emit事件通知父组件修改对应值：

1. 子组件代码调整：

import { defineEmits } from 'vue'

setup(props) {
  const emit = defineEmits(['update:score'])
  const changeScore = (value) => {
    emit('update:score', value)
  }
  return {
    changeScore,
  }
}

2. 父组件绑定事件修改自身的story.score值即可，修改后父子组件的对应数据都会同步更新，也能正常触发视图渲染。

临时解决方案：如果需要临时修改引用类型prop的属性，Vue2可使用$set(props.story, 'score', value)赋值，Vue3可确保story初始化时就包含score属性再修改，但是该方案不符合官方规范，不建议长期使用。

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