2024年前端最全手把手带你分解 Vue 倒计时组件，前端开发规范文档

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

如果此时倒计时组件正在做活动一的倒计时，然后点击活动二，就要会马上传入新的time，这个时候就需要重新计时。当然，这里并不会重新计时，因为组件的mounted只会执行一次。也就是说

this.countDown();

只会执行一次，也就是说

this.getTime(this.duration);

只会执行一次，因此duration还是活动一的时间，怎么办呢？watch派上用场了。

我们来监听duration，如果发现duration变化，说明新的时间time传入组件，这时就要重新调用this.countDown()。

代码如下：

还剩{
{day}}天{
{hours}}:{
{mins}}:{
{seconds}}

好了，但是并没有解释上面提出的那个问题：为什么要有

this.timer && clearTimeout(this.timer);

这一句？

这样，假设现在页面显示的是活动一的时间，这时，执行到setTimeout，在一秒后就会把setTimeout里的回调函数放到任务队列中，注意是一秒后哦！这时，然而，在这一秒的开头，我们点击了活动二按钮，这时候的活动二的时间就会传入倒计时组件中，然后触发

countDown()

,也就调用

this.getTime(this.duratio