重新加载Vue组件时props已更新但this作用域下props仍指向旧值

问题根因 #

• 你的模态框复用了同一个帖子组件实例：data函数仅会在组件首次初始化时执行1次，后续切换传入的post props时不会重新触发data初始化，导致所有基于初始post赋值的派生状态（userHasVoted、votes、reply对象等）都会残留首次加载的值。
• 若你在方法中直接读取this.post也拿到旧值，大概率是父组件切换帖子时未替换整个post对象，仅修改了旧对象的属性，触发了模板的浅更新但未同步到组件实例的响应式跟踪，或是组件未销毁重建导致上下文残留。

解决方案 #

方案1（推荐，无旧数据残留风险） #

强制组件每次打开模态框时销毁重建，彻底清空旧状态：
给你的帖子组件绑定唯一key，值为当前帖子ID，同时用v-if控制模态框显示（不要用v-show），示例：

<!-- 父组件模态框部分代码 -->
<PostDetail 
  :post="currentActivePost" 
  :key="currentActivePost._id"
  v-if="postModalVisible"
/>

每次切换帖子/开闭模态框时，Vue都会销毁旧组件实例，用新的post参数重新初始化组件，data函数会重新执行，不会残留旧数据。

方案2（不销毁组件的适配方案） #

添加watch监听post props的变化，主动更新所有派生状态：

module.exports = {
    props: ['post'],
    data: function(){
        return {
            userHasVoted: false,
            votes: 0,
            showReply: false,
            replyPlaceholder: "Post reply here",
            reply: {
                comment_of: null,
                channel: null,
                post: null,
                tags: []
            },
            tagify: null,
            showByIndex: null
        }
    },
    watch: {
        post: {
            immediate: true, // 首次加载也触发赋值
            handler(newPost) {
                this.userHasVoted = newPost.userHasVoted
                this.votes = newPost.voters.length
                this.reply.comment_of = newPost._id
                this.reply.channel = newPost.channel
                // 其他需要重置的状态可在这里同步更新，比如清空回复内容、重置点赞状态等
            }
        }
    },
    methods: {
        // 原有方法逻辑
    }
}

同时检查父组件逻辑：切换帖子时直接替换整个currentActivePost对象，不要修改旧post对象的属性，避免Vue2响应式更新丢失。

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