Vue 以编程方式强制刷新数据，即使使用 v-once答案

【问题标题】：Vue programatically force refresh data even with v-onceVue 以编程方式强制刷新数据，即使使用 v-once
【发布时间】：2018-10-27 00:22:46
【问题描述】：

思路如下：

我有一个带有这个模板的组件：

<span class="message" v-once>
    {{ headline }}
</span>

我在标题文本上设置了v-once 指令，因为当组件实际在实时环境中使用时，标题文本无法更改。

现在，我正在构建一个工具，我们可以在其中查看所有组件的详细信息。使用此工具，我在页面上有一个消息输入，允许用户修改在组件中看到的文本。只要v-once 不存在，它就可以正常工作。

出于优化目的，我希望使用v-once 指令，但我只需要一种方法在我的工具中覆盖它一次。我希望我可以使用$forceUpdate()，但它并不能解决问题（可能仍在考虑v-once）。

有没有办法做到这一点？如果没有，我可以把v-once 去掉，但会很好。

【问题讨论】：

【解决方案1】：

有趣的问题。我认为您不应该尝试使用 v-once 指令刷新组件，因为正如您所提到的，使用它的目的是渲染一次并将该组件视为静态内容，这样您的组件就会获得更好的性能。

来自文档：

在 Vue 中渲染纯 HTML 元素非常快，但有时您的组件可能包含大量静态内容。在这些情况下，您可以通过将 v-once 指令添加到根元素来确保它只评估一次然后缓存，如下所示：

<div v-once>
    <h1>Terms of Service</h1>
    ... a lot of static content ...
</div>

因此，您可以使用计算属性来获得更好的性能，因为它们是根据它们的依赖关系缓存的，来自文档：

计算属性仅在其某些依赖项发生更改时才会重新评估。这意味着只要消息没有改变，对 reversedMessage 计算属性的多次访问将立即返回先前计算的结果，而无需再次运行该函数。

最后的想法：如果您的组件将或可以更新数据元素（并且您希望您的应用显示这些更改），那么您不应该使用 v-once 指令。

【讨论】：