使用 Vue.js 防止 DOM 刷新？答案

【问题标题】：Prevent DOM refresh with Vue.js?使用 Vue.js 防止 DOM 刷新？
【发布时间】：2020-05-27 10:32:38
【问题描述】：

我知道这可能表明对 Vue.js 的操作方式有基本的了解，但这里是……

我有一个使用 Vue.js 的应用程序，其中有一个简单的倒计时，每秒更新一次以显示事件开始前的时间。每一秒，这都会导致 DOM 刷新，这意味着涉及的任何方法，例如确定类等都是运行的，效率低下。但更重要的是，它会导致任何正在显示的工具提示每秒闪烁一次。

所以我的问题是，有没有一种方法可以让我在 Vue.js 管理的 div 中执行这个倒数计时器，它不涉及刷新页面上的所有其他内容？以某种方式隔离它？

【问题讨论】：

分享你的工作代码？
我希望有一个来自一般原则的答案。我需要几个小时来隔离一些代码来重现这一点。
codesandbox.io/s/wandering-sunset-vm1te?file=/src/App.vue这是你想要的吗？
我有一个可以正常工作的倒计时时钟。实际上，您可以在virtualrelay.norfolkgazelles.co.uk/leaderboard 看到它。我试图避免的是当您将鼠标悬停在例如'Dereham Runners AC' - 工具提示每秒都在刷新，这是我不想要的。
我认为您正在调用一个正在更改工具提示的函数。在此处分享您的组件代码。

标签： vue.js

【解决方案1】：

一旦您清楚地了解问题，答案就足够简单了。出现问题是因为我使用反应数据来显示计时器 - {{countdownMessage}}。因此，当该反应数据发生任何更改时，将检查所有位置的所有反应数据。所以这里的秘诀是将其保留为空 div 并使用 document.getElementById("countdown").innerHtml=msg 作为构建消息的方法的最后一行，而不是将值分配给数据。

我太习惯于用 Vue.js 术语来思考所有变化数据的显示，以至于我忘记了有时可能需要其他技术来代替。

【讨论】：

这一定与您的代码编写方式有关，因为无需重新渲染工具提示就可以做到这一点。看我整理的例子：codesandbox.io/s/countdown-timer-example-f7bqf?file=/src/…
@NilsonJacques，这很有趣。我会研究一下，看看有什么不同的做法。感谢您抽出宝贵时间。