Vue中不使用Watcher实现子组件数据更新后父组件动态获取与展示

当然有，而且你当前代码里的watch(template, fetchAllTemplates)写法还会触发无限循环（更新template后触发监听，监听又重新拉取数据更新template），完全没必要。下面给你几个实用的替代方案，解决侧边栏在其他页面修改数据后自动刷新的问题：

方案一：操作完成后手动触发刷新 #

这是最直接、资源消耗最低的方式——在创建/编辑/删除模板的页面，当API请求成功完成后，主动通知布局页刷新数据。

比如在CreateTemplate组件的提交逻辑里：

// CreateTemplate.vue 提交成功后
async function submitTemplate() {
  await axios.post('https://my-api.com/templates', newTemplate);
  // 触发自定义事件通知布局页刷新
  window.dispatchEvent(new CustomEvent('template-updated'));
  router.push('/');
}

然后在你的AppLayout组件里监听这个事件：

// AppLayout.vue 的setup函数内
import { onMounted, onUnmounted } from 'vue';

setup() {
  // ...其他已有代码

  onMounted(() => {
    fetchAllTemplates();
    // 监听自定义事件，触发刷新
    const handleTemplateUpdate = () => fetchAllTemplates();
    window.addEventListener('template-updated', handleTemplateUpdate);
    
    // 组件销毁时移除监听，避免内存泄漏
    onUnmounted(() => {
      window.removeEventListener('template-updated', handleTemplateUpdate);
    });
  });
}

这种方式只有当数据真的被修改时才会执行刷新，完全没有持续监听的资源消耗。

方案二：监听路由变化触发刷新 #

因为用户是从创建/编辑/删除页面回到布局页，所以可以利用路由跳转的时机触发数据刷新：

// AppLayout.vue 的setup函数内
import { useRouter } from 'vue-router';
import { onMounted, onUnmounted } from 'vue';

setup() {
  const router = useRouter();
  // ...其他已有代码

  onMounted(() => {
    fetchAllTemplates();
    // 路由跳转完成后，判断是否回到模板列表页，触发刷新
    const unregisterRouterGuard = router.afterEach((to) => {
      // 假设模板列表页的路由name是'template-list'，根据你的路由配置调整
      if (to.name === 'template-list') {
        fetchAllTemplates();
      }
    });

    // 组件销毁时取消路由监听
    onUnmounted(() => unregisterRouterGuard());
  });
}

这种方式不需要额外的事件通信，利用路由的天然跳转逻辑触发刷新，适配大多数场景。

方案三：用全局状态管理（Pinia/Vuex） #

如果你的项目使用Pinia或Vuex，可以把模板数据存在全局状态中，修改数据时直接更新全局状态，侧边栏因为绑定了响应式的全局状态会自动渲染最新内容，完全不需要额外刷新逻辑。

以Pinia为例：

// stores/templateStore.js
import { defineStore } from 'pinia';
import axios from 'axios';

export const useTemplateStore = defineStore('template', {
  state: () => ({
    templates: []
  }),
  actions: {
    async fetchTemplates() {
      const res = await axios.get('https://my-api.com/templates');
      this.templates = res.data;
    },
    async addTemplate(newTemplate) {
      await axios.post('https://my-api.com/templates', newTemplate);
      // 新增后直接拉取最新列表，或者直接把新模板push到数组
      await this.fetchTemplates();
    }
  }
});

然后在AppLayout组件中使用全局状态：

// AppLayout.vue 的setup函数内
import { useTemplateStore } from '@/stores/templateStore';
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';

setup() {
  const templateStore = useTemplateStore();
  // 把状态转为响应式ref，供模板使用
  const { templates } = storeToRefs(templateStore);

  onMounted(() => {
    templateStore.fetchTemplates();
  });

  // 直接返回全局状态的templates，状态更新时自动渲染
  return {
    // ...其他已有数据
    template: templates
  };
}

在CreateTemplate组件中提交后，直接调用store的addTemplate方法，全局状态更新后，侧边栏会自动展示最新的模板列表。

总结 #

上面的方案都是按需触发更新或者依赖响应式状态自动更新，没有持续占用资源的问题，不仅替代了Watcher，还避免了原代码中无限循环的风险。

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