Vue.js Vue通过编程强制刷新数据，即使使用v-once

其思路如下：

我有一个具有此模板的组件：

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

{{headline}}

我在标题文本上有

v-once

指令，因为当组件实际在实时环境中使用时，标题文本无法更改

现在，我正在构建一个工具，我们可以在其中查看所有组件的详细信息。使用这个工具，我在页面上有一个消息输入，允许用户修改组件中显示的文本。只要

v-once

不存在，这就可以正常工作

出于优化目的，我希望有

v-once

指令，但我只需要一种方法在我的工具中覆盖该指令一次。我希望我可以利用

$forceUpdate（）

，但它没有起到作用（可能仍然考虑

v-once

）

---

有没有办法做到这一点？如果没有，我可以把

v-once

去掉，但这会很好。

有趣的问题。我认为您不应该尝试使用

v-once

指令刷新组件，因为正如您提到的，使用它的目的是渲染一次并将该组件视为静态内容，这样您的组件可以获得更好的性能

从文档：

在Vue中呈现纯HTML元素的速度非常快，但有时您可能有一个包含大量静态内容的组件。在这些情况下，您可以通过向根元素添加v-once指令来确保只对其求值一次，然后对其进行缓存，如下所示：

服务条款
... 很多静态内容。。。

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

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

---

最后的想法：如果您的组件将或可能更新数据元素（并且您希望您的应用程序显示这些更改），您不应该使用

v-once

指令。

v-once的要点是您不能更改它。如果你需要改变它，我想你应该把它关掉。我无法想象

v-once

能对性能或任何东西提供有意义的改进。

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