微信小程序rich-text不支持动态修改内联样式，因底层仅首次解析nodes时读取style；需用key强制重渲染或改用预设class方案。
rich-text 组件在微信小程序端不支持动态修改内联样式（比如通过 v-bind:style 或运行时改写 nodes 中的 style 字段），这是由小程序底层渲染机制决定的——它只在首次解析 nodes 时读取样式，后续对 nodes 对象的修改（哪怕是深拷贝后赋值）都不会触发样式重绘。
为什么直接改 nodes[i].attrs.style 没用
微信小程序的 rich-text 是原生组件，其 nodes 属性是“一次性快照”，不是响应式数据。即使你用 JSON.parse(JSON.stringify(...)) 深拷贝再修改 style，Vue 的响应式系统也无法通知小程序重新解析样式字段。
- 现象：
console.log看到nodes已更新，但文字颜色、字号等样式完全没变 - 本质：小程序端
rich-text只在nodes引用变化（即新数组/新对象）且内容结构有差异时才可能重渲染，但style字符串变更本身不触发样式重载 - 兼容性：此限制在微信基础库 2.25.0+ 仍存在，
alipay和tt小程序表现类似，仅 H5 端无此问题
用 key 强制重置 rich-text 实例
最可靠的做法是利用 Vue 的 key 机制让组件彻底销毁重建，从而让小程序重新解析整个 nodes 结构。
- 给
<rich-text :nodes="nodes" :key="richTextKey" />绑定一个可变的key - 每次需要更新样式时，先修改
nodes数据，再执行this.richTextKey = Date.now()或Math.random() - 注意不要用太短的间隔连续触发（如高频编辑场景），否则可能引发白屏或卡顿
- 示例：
updateNodeStyle() { const newNodes = this.deepCloneNodes(this.nodes) newNodes[0].attrs.style = 'color: red; font-size: 18px;' this.nodes = newNodes this.richTextKey = Date.now() // 关键：强制重渲染 }
避免在 nodes 中硬编码 style，改用 class + 外部 CSS
如果你能控制富文本生成逻辑（比如后端返回的是带 class 的 HTML，前端用 html-parser2 转成 nodes），优先走 CSS 类名方案——因为小程序端 rich-text 支持 class，且类名变更只要 key 不变也能生效（前提是对应 CSS 已注入）。
- 做法：把所有动态样式映射为预设 class，例如
text-red text-lg，然后在<style>中统一定义 - 好处：无需频繁重 key，减少 DOM 销毁开销；适配暗色模式、字体缩放等也更可控
- 注意：
rich-text不支持自定义标签或外部样式表，CSS 必须写在当前页面的<style scoped>或<style>中，且 class 名不能含特殊字符或下划线（建议用中划线）
真要动态插样式？考虑降级为 web-view 或自研渲染器
如果业务强依赖运行时逐字设置颜色、背景、动画等（比如富文本高亮标注、协作光标），rich-text 天然不满足。这时得换方案：
-
web-view：加载本地 HTML + 内联样式，完全可控，但无法与 Vue 响应式联动，通信需postMessage，且 iOS 微信有缓存 bug - 自研轻量渲染器：用多个
<text>+<view>拼接（适合段落少、结构简单的内容），可完全控制每个节点样式，但要手动处理换行、长按选中、光标定位等 - 放弃小程序端富文本交互：对“只读展示”场景，可在 onLoad 阶段一次性生成带样式的
nodes，后续不再修改 —— 这是最省事也最稳的方式
真正麻烦的不是怎么改样式，而是改完之后小程序压根不认。别在 nodes.style 上死磕响应式，key 重置和 class 预设才是小程序端实际可行的两条路。至于要不要上 web-view，先测下你的平均富文本长度和交互频次——超过 300 字还频繁高亮，就该换思路了。
