Vue.js中如何在created后随父组件传参变化重新执行函数？

没问题，这个需求在Vue开发里非常常见，我结合你的代码场景给你两种实用的实现方式，你可以根据自己的习惯选择：

首先先把你的代码补全并标准化，确保逻辑更清晰：

<template>
  <div>
    <!-- 可以添加加载状态提升用户体验 -->
    <p v-if="loading">加载中...</p>
    <p v-else>{{ data_to_show_on_mainpage }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: {
    // 假设父组件传入的变量叫parentVar，根据实际类型调整验证规则
    parentVar: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      data_to_show_on_mainpage: '',
      loading: false
    };
  },
  methods: {
    // 把API请求逻辑封装成独立方法，方便复用和维护
    async fetchData() {
      this.loading = true;
      try {
        // 将父组件传入的变量作为API参数传入
        const response = await axios.get('你的外部API地址', {
          params: {
            relatedParam: this.parentVar
          }
        });
        this.data_to_show_on_mainpage = response.data;
      } catch (err) {
        console.error('请求API失败:', err);
        // 这里可以添加用户友好的错误提示
        this.data_to_show_on_mainpage = '数据加载失败';
      } finally {
        this.loading = false;
      }
    }
  },
  // 核心监听逻辑二选一即可
  // --- 方式一：用watch+immediate，替代created钩子 ---
  watch: {
    parentVar: {
      // 组件创建时立即执行一次，相当于替代created里的首次调用
      immediate: true,
      handler(newVal) {
        // 加个判断避免无效值触发请求
        if (newVal) {
          this.fetchData();
        }
      }
    }
  }

  // --- 方式二：保留created钩子+单独watch ---
  // created() {
  //   // 组件首次创建时执行一次请求
  //   this.fetchData();
  // },
  // watch: {
  //   // 父组件变量变化时重新触发请求
  //   parentVar(newVal) {
  //     if (newVal) {
  //       this.fetchData();
  //     }
  //   }
  // }
};
</script>

额外注意事项： #

• 如果父组件传入的是复杂类型（对象/数组），需要给watch加上deep: true来监听内部属性的变化，示例如下：

  watch: {
    parentVar: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.fetchData();
      }
    }
  }
  

• 异步请求一定要添加错误处理，避免页面出现未知问题或卡死
• 加载状态可以有效降低用户等待焦虑，建议保留

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