javascript - 在生产中的 Vue 在按钮中使用 v-text 时会破坏应用程序

Question

我有一个奇怪的错误，我已经缩小了范围，但不幸的是无法创建一个最小的可重现示例(请原谅我!)

我正在使用 Nuxt.js、Vuetify、Vue.js

当我在开发模式下运行时，该应用程序可以运行。

但是当我在生产模式下运行时，以下组件会导致应用程序卡住(所有按钮都变得无响应)。

<v-btn nuxt :to="to" color="primary" large v-text="text" />

当我将 v-text="text" 替换为 {{ text }} 作为内部节点时，一切都开始重新工作。

之前(损坏)

<v-btn nuxt :to="to" color="primary" large v-text="text" />

之后(已修复)

<v-btn nuxt :to="to" color="primary" large>{{ text }}</v-btn>

有谁知道 Vue 生产模式会发生什么变化，或者为什么 v-text 会成为罪魁祸首？

Answer 1

我没有解释为什么它在开发中有效但在生产中无效，但这无关紧要，因为您不应该在组件上使用 v-text (除非该组件专门与 一起使用) v 文本)。

v-text 只需在组件的根元素上设置 innerText DOM 属性即可；这两者在功能上是等效的:

<v-btn v-text="text"></v-btn>
<v-btn :inner-text.prop="text"></v-btn>

设置 innerText 会将元素的所有子节点替换为单个文本节点，本质上会破坏组件的模板。

最好以正常方式设置按钮内容，以便组件可以将其放置在模板中的正确位置:

<v-btn>{{ text }}</v-btn>