Vue子组件在父组件date状态变更时未按传入新参数重新渲染

EntryList.vue 中加载日志的逻辑仅绑定在 created 生命周期钩子上，该钩子只在组件首次初始化时触发一次。当父组件的date值更新、传给子组件的listDate变化时，子组件本身并不会被重新创建，这段加载逻辑自然不会再次执行，也就不会拉取新日期对应的条目数据。
Day.vue 内的dayTitle能正常响应变化，是因为它是依赖响应式date的计算属性，只要依赖值更新就会重新计算，和子组件的数据加载逻辑没有关联。

两种实现方式可按场景选择：

• 低开销实现：侦听props变化触发数据加载，适合长期维护的代码
• 快速调试实现：通过key强制重建组件，适合临时修改、快速验证效果

方案一：侦听props变化触发数据加载（推荐） #

把加载条目的逻辑抽成独立方法，首次创建时执行一次，同时增加对listDate的侦听，值变更时重新执行加载逻辑，这种方式不需要重建组件，性能开销最小。
修改后的EntryList.vue脚本部分：

import Entry from "./Entry";
export default {
  components: {
    Entry,
  },
  props: {
    listDate: {
      type: Date,
      required: true,
    },
  },
  data() {
    return {
      entries: [],
    };
  },
  created() {
    this.loadEntriesForDate();
  },
  watch: {
    // 监听传入的日期变化，触发数据重加载
    listDate() {
      this.loadEntriesForDate();
    }
  },
  methods: {
    loadEntriesForDate() {
      console.log("Render List");
      const dateStamp = this.listDate.toLocaleDateString();
      chrome.storage.sync.get([dateStamp], (result) => {
        // 增加空值兜底，避免对应日期无存储数据时报错
        this.entries = Object.values(result[dateStamp] || {});
      });
    }
  },
  computed: {
    dateStamp() {
      return this.listDate.toLocaleDateString();
    },
  },
};

方案二：通过key强制重建组件（快速实现） #

如果不想改动子组件内部逻辑，可以在父组件引用EntryList时，绑定一个和当前日期强关联的key属性。每次日期变化时，key值会同步更新，Vue会自动销毁旧的子组件实例、创建新的实例，created钩子就会重新执行，完成数据更新。
修改Day.vue内的组件引用代码：

<!-- 绑定随日期变化的key，触发组件重建 -->
<EntryList 
  :key="date.toLocaleDateString()"
  v-bind:listDate="date" 
/>

注意：这种方式会完全销毁重建子组件，对复杂逻辑的组件会有不必要的性能损耗，简单场景下可快速使用。

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