VueJS 2.x 多层嵌套子组件CommentList未响应父组件prop变更问题

• Vue组件的更新触发逻辑为：只有**模板/渲染函数中直接使用的响应式变量（渲染依赖）**发生变化时，才会触发组件的beforeUpdate、updated生命周期钩子以及重新渲染。
• CommentList组件的模板仅使用了响应式变量comments，完全没有用到传入的prop selectedTicket，因此selectedTicket的变更不会被Vue识别为需要触发组件更新的信号，对应的生命周期钩子自然不会执行，getComments方法也无法被调用。
• 额外说明：即使你在beforeUpdate钩子中用到了selectedTicket，但beforeUpdate本身是组件更新触发后才会执行的后置逻辑，属于更新的结果而非触发更新的条件，不会反向让Vue将该变量标记为渲染依赖。

另外你代码里存在一个小瑕疵：data中comments: Array是错误的初始化写法，数组初始值应该写[]而非构造函数Array，如果不调整逻辑的话需要先修正该写法避免异常。

方案1：使用watch监听selectedTicket变更（最推荐） #

直接监听prop的变化，变化时主动调用getComments方法，逻辑清晰符合Vue的使用规范：

export default {
  // 原有逻辑保持不变
  watch: {
    selectedTicket: {
      immediate: true, // 组件初始化时就执行一次，可替代mounted中的初始调用
      handler() {
        this.getComments()
      }
    }
  }
}

方案2：将comments改为计算属性（更简洁） #

直接把过滤评论的逻辑放到计算属性中，天然依赖selectedTicket，不需要手动调用更新：

export default {
  name: "CommentList",
  components: {
    CommentItem,
  },
  data() {
    return {
      refreshFlag: 0 // 用于触发localStorage更新后的刷新
    }
  },
  props: {
    selectedTicket: Object,
  },
  computed: {
    comments() {
      // 建立与refreshFlag的依赖关系，事件触发时更新标记即可刷新评论
      this.refreshFlag
      const comments = JSON.parse(window.localStorage.getItem("comments")) || []
      return comments.filter(comment => comment.ticketId === this.selectedTicket.id)
    }
  },
  mounted() {
    this.$root.$on("updateComments", () => {
      this.refreshFlag += 1
    });
    console.log("CL Mounted");
  },
}

方案3：在模板中引入selectedTicket依赖（hack方案，不推荐） #

如果不想调整现有逻辑，也可以在模板里加一个不显示的节点引用selectedTicket，让Vue将其标记为渲染依赖：

<template>
  <div id="comment-list">
    <!-- 隐藏节点，仅用于建立渲染依赖 -->
    <span v-show="false">{{selectedTicket.id}}</span>
    <comment-item
         v-for="comment in comments"
         :key="comment.id"
         :comment="comment"
    />
  </div>
</template>

该方案可读性差，不建议在生产环境使用。

内容的提问来源于stack exchange，提问作者D.Schaller