Vue项目中能否重新调用mounted生命周期刷新v-for渲染的列表数据

结论 #

不建议直接手动调用mounted生命周期函数来触发数据刷新。

原因 #

mounted是Vue框架预设的生命周期钩子，设计初衷是组件挂载完成后由框架自动调度执行，不属于给开发者手动调用的公共方法。即使强行调用可以执行内部的接口请求逻辑，也可能因为mounted中包含其他初始化逻辑（比如事件绑定、第三方组件初始化等），重复执行后引发意料之外的异常。

正确实现方案 #

将获取数据的逻辑抽离为独立的公共方法，初始化和增删操作完成后都调用这个方法即可。只要dataset被重新赋值为接口返回的最新数据，Vue的响应式系统会自动触发v-for重新渲染表格，无需额外手动操作视图。

示例代码如下：

methods: {
  // 抽离独立的数据拉取方法
  fetchDataset() {
    axios.get(/* 你的接口地址 */).then((response) => {
      this.dataset = response.data;
    });
  },
  // 删除按钮绑定的触发方法
  handleDelete() {
    axios.delete(/* 删除接口地址 */).then(() => {
      // 删除操作成功后重新拉取最新数据
      this.fetchDataset();
    });
  },
  // 新增按钮绑定的触发方法同理
  handleAdd() {
    axios.post(/* 新增接口地址 */, /* 提交参数 */).then(() => {
      this.fetchDataset();
    });
  }
},
mounted() {
  // 组件挂载完成后首次加载数据
  this.fetchDataset();
}

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