Я создаю расширенный, полностраничный инструмент WYSIWYG, используя Vue. Для этого мне нужно динамически отобразить таблицу стилей CSS на основе BLOB-объектов JSON, содержащих свойства CSS, в <head> страницы.
Каков наиболее эффективный способ сделать это? Vue использует концепцию CSS с областью действия, которая компилируется во время сборки. Это не позволяет модификацию времени выполнения. Что мне нужно, так это возможность изменять, компилировать и отображать CSS во время выполнения.
Текущее решение
В настоящее время у меня есть обычный компонент Vue, в котором я используюредуктор для преобразования JavaScript в строку CSS, которая отображается внутри тега <style>.
Однако вся эта строка перерисовывается при каждом изменении CSS. Это недостаточно эффективно для моего варианта использования.
Желаемое решение
Решение, которое будет отображать мои CSS-правила, не полагаясь на один компонент Vue, так что оно выбраноот Virtual VOM от Vue и извлекает выгоду из его производительности.
Теперь, когда я пишу это, я думаю, что это может быть решением для визуализации компонента Vue для каждого отдельного класса CSS, но я не уверен, чтоэто будет работать. Мне любопытно услышать другие перспективы этой проблемы.