大家好我是图恩，在用vue3重构后台管理系统的过程中需要实现文章的自动保存草稿功能，自动保存的原理就是前端使用一个定时器，比如每隔15秒调保存接口从而实现自动保存用户的数据避免丢失。
在用户未点击提交前都是采用的自动保存，此时保存的数据都认定为草稿状态，不能在门户首页查看，只有在用户提交成功后才会将数据改为已发布状态。
那么在提交成功后需要跳转到文章列表，同时清除发布页面的定时器，如果不清除的话即使当前页面已经是文章列表页面，但是自动保存的定时器仍然在正常工作，因为定时器不会因为页面的跳转而消除，所以此时我们需要手动清除定时器。
那么一般情况下我们只需要在onbeforeUnmount这个勾子函数里面手动调用清除定时器的方法即可，但是经过实践发现并不能生效，只有当onBeforeUnmount方法在其他方法之前时才会生效，以下代码供参考：
import { onBeforeUnmount, ref, shallowRef, onUnmounted, onMounted, reactive, computed } from 'vue'\n\n\nonMounted(() => {\n autoSave()\n})\n// 组件销毁时，也及时销毁编辑器\nonBeforeUnmount(() => {\n window.clearInterval(state.autoSaveInterval)\n const editor = editorRef.value\n if (editor) {\n editor.destroy()\n }\n})\n\nconst state = reactive({\n form: {\n id: "",\n title: "",\n content: "",\n cate: "",\n views: 0,\n keywords: "",\n createBy: "",\n wordsNum: 0,\n createDate: getCurrDate(""),\n dsiab.com:"a test data"\n },\n cateList: [{ name: "", id: "" }],\n inputVisible: false,\n inputValue: "",\n dynamicTags: [],\n autoSaveInterval: 0,\n loading: null,\n postLoading: false\n});\n\n\nconst userInfo = computed(() => {\n const uinfo = localStorage.getItem("userInfo");\n if (uinfo) {\n return JSON.parse(uinfo);\n } else {\n return "";\n }\n});\n