Javascript 在Vuejs 3中删除DOM时，如何停止js setInterval？

我有一个component.vue文件，其中包含一个SVG。SVG的动画在文件的标记中定义。脚本代码修改SVG不同部分的行为

问题是当DOM被重新呈现时（当我转到另一个路由器链接/页面时）。我开始变得

未捕获引用错误：
导出默认值{
名称：“手提钻”，
数据（）{
返回{
计时器：空，
}
},
在…之前{
clearInterval（这个计时器）；
},
安装的（）{
var funcs=[
“加载”，
“addEventListener”，
“daysLeft”，
“getElementById”，
“设置间隔”，
“getTime”，
“getTimezoneOffset”，
“地板”，
“文本内容”，
];
var daysLeft；
var frameNumber=0；
var endDate=新日期（2021年、1年、20年、10年、0年、0年、0年）；
window.addEventListener(
“加载”，
用手提钻固定（这个），
假的
);
函数initJackhammer（）{
daysLeft=document.getElementById（funcs[2]）；
showtimelft（）；
设置间隔（ShowTimeLeft，1000）；
var jackhammerTip=document.getElementById（“jackhammerTip”）；
var jackhammer=document.getElementById（“jackhammer”）；
var jackBody=document.getElementById（“jackBody”）；
var jackArms=document.getElementById（“jackArms”）；
this.timer=设置间隔（animateJackhammer，40）；
}
函数ShowTimeLeft（）{
//如果（！document.getElementById（“hourslow”））{
//返回；
// }
var CurrTime=新日期（）；
var timeDiff=（endDate-CurrTime）/1000；
var timeDiffInDays=数学下限（timeDiff/86400）；
timeDiff-=timeDiffInDays*86400；
var TIMEDIFHOURS=数学下限（timeDiff/3600）%24；
timeDiff-=TimeDiffHours*3600；
var TimeDiffMinutes=数学地板（timeDiff/60）%60；
timeDiff-=TimeDiffMinutes*60；
var TimeDiffSeconds=数学下限（timeDiff%60）；
daysLeft.textContent=timeDiffInDays；
hoursLeft.textContent=TimeDiffHours；
minutesLeft.textContent=TimeDiffMinutes；
secondsLeft.textContent=TimeDiffSeconds；
}
函数animateJackhammer（）{
//控制台日志（手提钻尖）
如果（！document.getElementById（“jackhammerTip”））{
返回；
}
frameNumber++；
jackhammerTip.setAttribute(
“转化”，
“转换（0，”+（帧号%3）*-3+””
);
jackhammer.setAttribute(
“转化”，
“转换（0，”+-Math.sin（帧号*1.5）+”）”
);
var jackBodyAmount=Math.sin（frameNumber）+2；
jackBody.setAttribute(
“转化”，
翻译（0，“+-jackBodyAmount+”）
);
jackArms.setAttribute(
“转化”，
翻译（0，“+-jackBodyAmount+”）
);
如果（frameNumber==1000）frameNumber=0；
}
},
};
导出默认值{
名称：“手提钻”，
数据（）{
返回{
计时器：空，
}
},
在…之前{
clearInterval（这个计时器）；
},
安装的（）{
var funcs=[
“加载”，
“addEventListener”，
“daysLeft”，
“getElementById”，
“设置间隔”，
“getTime”，
“getTimezoneOffset”，
“地板”，
“文本内容”，
];
var daysLeft；
var frameNumber=0；
var endDate=新日期（2021年、1年、20年、10年、0年、0年、0年）；
window.addEventListener(
“加载”，
用手提钻固定（这个），
假的
);
函数initJackhammer（）{
daysLeft=document.getElementById（funcs[2]）；
showtimelft（）；
设置间隔（ShowTimeLeft，1000）；
var jackhammerTip=document.getElementById（“jackhammerTip”）；
var jackhammer=document.getElementById（“jackhammer”）；
var jackBody=document.getElementById（“jackBody”）；
var jackArms=document.getElementById（“jackArms”）；
this.timer=设置间隔（animateJackhammer，40）；
}
函数ShowTimeLeft（）{
//如果（！document.getElementById（“hourslow”））{
//返回；
// }
var CurrTime=新日期（）；
var timeDiff=（endDate-CurrTime）/1000；
var timeDiffInDays=数学下限（timeDiff/86400）；
timeDiff-=timeDiffInDays*86400；
var TIMEDIFHOURS=数学下限（timeDiff/3600）%24；
timeDiff-=TimeDiffHours*3600；
var TimeDiffMinutes=数学地板（timeDiff/60）%60；
timeDiff-=TimeDiffMinutes*60；
var TimeDiffSeconds=数学下限（timeDiff%60）；
daysLeft.textContent=timeDiffInDays；
hoursLeft.textContent=TimeDiffHours；
minutesLeft.textContent=TimeDiffMinutes；
secondsLeft.textContent=TimeDiffSeconds；
}
函数animateJackhammer（）{
//控制台日志（手提钻尖）
如果（！document.getElementById（“jackhammerTip”））{
返回；
}
frameNumber++；
jackhammerTip.setAttribute(
“转化”，
“转换（0，”+（帧号%3）*-3+””
);
jackhammer.setAttribute(
“转化”，
“转换（0，”+-Math.sin（帧号*1.5）+”）”
);
var jackBodyAmount=Math.sin（frameNumber）+2；
jackBody.setAttribute(
“转化”，
翻译（0，“+-jackBodyAmount+”）
);
jackArms.setAttribute(
“转化”，
翻译（0，“+-jackBodyAmount+”）
);
如果（frameNumber==1000）frameNumber=0；
}
},
};将间隔分配给变量，然后在卸载之前的
步骤中
清除间隔（变量）

例如：

let myInterval
[...]
安装的（）{
myInterval=setInterval（animateJackhammer，40）；
}
[...]
卸载前（（）=>{
clearInterval（myInterval）；
})
将间隔分配给变量，然后在卸载之前的
步骤中
清除间隔（变量）

例如：

let myInterval
[...]
安装的（）{
myInterval=setInterval（animateJackhammer，40）；
}
[...]
以前