我正在使用 Vue 构建一个高级的、整页的 WYSIWYG 工具。为此，我需要基于包含 CSS 属性的 JSON blob 将 CSS 样式表动态呈现到<head>页面中。
执行此操作的最高效方法是什么？Vue 使用了作用域 CSS 的概念，它是在构建时编译的。它不允许运行时修改。我需要的是在运行时修改、编译和渲染 CSS 的能力。
当前解决方案
我目前有一个常规的 Vue 组件，我在其中使用 reducer 将 JavaScript 转换为 CSS 字符串，然后在<style>标签内呈现。
然而，这整个字符串会在每一次 CSS 更改时重新渲染。这对我的用例来说性能不够。
所需的解决方案
一种解决方案，它可以在不依赖单个 Vue 组件的情况下呈现我的 CSS 规则，以便它被 Vue 的虚拟 DOM 拾取并从其性能中受益。
现在我正在写这篇文章，我认为这可能是为每个 CSS 类渲染一个 Vue 组件的解决方案，但我不确定这是否可行。我很想听听这个问题的其他观点。