Vue中基于prop创建的响应式对象如何在prop更新后同步变更

你在组件初始化时仅将props.comment的初始值赋值给了commentRef，该赋值逻辑只会执行一次，后续prop更新时没有对应逻辑同步到内部的ref，因此出现数据不一致的问题。

方案1：监听prop变化同步更新ref #

适配你现有保留本地状态的需求，新增监听逻辑同步prop变更：

<template>
 <vote-buttons :score="commentRef.score"
               @update-score="updateScore">
 </vote-buttons>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  props: {
    comment: {type: Object}
  },
  setup(props) {
    const commentRef = ref(props.comment);
    // 监听comment prop变化，同步更新内部ref
    watch(
      () => props.comment,
      (newComment) => {
        commentRef.value = newComment
      },
      // 深度监听适配对象内部属性变更的场景，仅替换整个对象时可删除
      { deep: true }
    )
    const updateScore = (value) => {
      commentRef.value.score = value;
    }
    return {
      commentRef,
      updateScore
    }
  }
}
</script>

该方案优势是子组件的本地状态和父组件prop完全解耦，修改本地状态不会直接影响父组件源数据，适合需要临时修改、不需要实时同步回父级的场景。

方案2：使用toRef直接绑定prop #

如果业务允许子组件修改直接同步到父组件源数据，可以直接用toRef创建和prop绑定的响应式引用，无需手动监听同步：

<script>
import { toRef } from 'vue'
export default {
  props: {
    comment: {type: Object}
  },
  setup(props) {
    // 和prop的comment属性直接绑定，自动同步更新
    const commentRef = toRef(props, 'comment');
    const updateScore = (value) => {
      commentRef.value.score = value;
    }
    return {
      commentRef,
      updateScore
    }
  }
}
</script>

方案3：给循环项添加唯一key排查渲染复用问题 #

如果上述配置不生效，大概率是Vue列表渲染时复用了组件实例导致逻辑未触发，给v-for添加唯一key即可：

<comment v-for="comment in comments" :key="comment.id" :comment="comment">
</comment>

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