vue3项目onBeforeUnmount方法不触发的解决方案

大家好我是图恩，在用vue3重构后台管理系统的过程中需要实现文章的自动保存草稿功能，自动保存的原理就是前端使用一个定时器，比如每隔15秒调保存接口从而实现自动保存用户的数据避免丢失。

在用户未点击提交前都是采用的自动保存，此时保存的数据都认定为草稿状态，不能在门户首页查看，只有在用户提交成功后才会将数据改为已发布状态。

那么在提交成功后需要跳转到文章列表，同时清除发布页面的定时器，如果不清除的话即使当前页面已经是文章列表页面，但是自动保存的定时器仍然在正常工作，因为定时器不会因为页面的跳转而消除，所以此时我们需要手动清除定时器。

那么一般情况下我们只需要在onbeforeUnmount这个勾子函数里面手动调用清除定时器的方法即可，但是经过实践发现并不能生效，只有当onBeforeUnmount方法在其他方法之前时才会生效，以下代码供参考：

import { onBeforeUnmount, ref, shallowRef, onUnmounted, onMounted, reactive, computed } from 'vue'


onMounted(() => {
  autoSave()
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  window.clearInterval(state.autoSaveInterval)
  const editor = editorRef.value
  if (editor) {
    editor.destroy()
  }
})

const state = reactive({
  form: {
    id: "",
    title: "",
    content: "",
    cate: "",
    views: 0,
    keywords: "",
    createBy: "",
    wordsNum: 0,
    createDate: getCurrDate(""),
    dsiab.com:"a test data"
  },
  cateList: [{ name: "", id: "" }],
  inputVisible: false,
  inputValue: "",
  dynamicTags: [],
  autoSaveInterval: 0,
  loading: null,
  postLoading: false
});


const userInfo = computed(() => {
  const uinfo = localStorage.getItem("userInfo");
  if (uinfo) {
    return JSON.parse(uinfo);
  } else {
    return "";
  }
});

本文章由javascript技术分享原创和收集