Vue.js 使用 Watch 替代 setTimeout 实现任务列表增删后自动刷新咨询

不需要依赖定时器，通过响应式触发标记+Watch监听器的组合就能实现操作成功后自动刷新列表，修改步骤如下：

1. 新增响应式触发标记 #

在Vue实例的data中新增一个用于标记操作状态的响应式变量，每次操作成功后修改该变量的值即可触发Watch：

data() {
  return {
    // 原有其他变量：taskList、newTaskContent等...
    taskOperateFlag: 0 // 新增操作触发标记，初始值可自定义
  }
}

2. 修改新增/删除的接口回调逻辑 #

把原来写setTimeout的逻辑替换成修改触发标记的代码，注意必须要在Axios的接口成功回调里修改，保证后端已经完成数据库操作后再触发刷新：

methods: {
  // 新增任务方法示例
  addTask() {
    axios.post('你的PHP新增接口地址', {
      content: this.newTaskContent
    }).then(res => {
      // 假设后端返回code=200代表操作成功
      if (res.data.code === 200) {
        // 操作成功后修改标记，值自增即可，只要发生变化就会触发Watch
        this.taskOperateFlag++
        // 其他原有逻辑：清空输入框、操作成功提示等...
      }
    })
  },
  // 删除任务方法示例
  deleteTask(taskId) {
    axios.post('你的PHP删除接口地址', {
      id: taskId
    }).then(res => {
      if (res.data.code === 200) {
        this.taskOperateFlag++
        // 其他原有逻辑：操作成功提示等...
      }
    })
  },
  // 原有获取任务列表的方法不需要修改
  getTaskList() {
    axios.get('你的PHP查询接口地址').then(res => {
      this.taskList = res.data.data
    })
  }
}

3. 新增Watch监听器 #

监听触发标记的变化，只要值发生变更就自动调用拉取任务列表的接口：

watch: {
  taskOperateFlag: {
    handler() {
      this.getTaskList()
    },
    immediate: true // 可选配置，开启后页面初始化时会自动拉取一次列表，不需要再在created里手动调用
  }
}

注意事项 #

• 不要在调用接口后立刻修改taskOperateFlag，必须等接口返回成功状态后再修改，否则还是会出现操作未完成就刷新列表的问题
• 如果不想新增额外的响应式变量，也可以直接监听操作成功的提示状态、后端返回的操作结果等其他会发生变化的响应式变量，逻辑完全一致

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