uni-app 之 uView u-parse 富文本渲染之坑

u-parse 组件在渲染的内容从纯文本变成 html 时，会什么都不渲染。比如以下代码渲染 b 文本再渲染 a 文本。就会渲染空白。

<template>
	<view>
		当前显示的html：
		<view style="margin-bottom: 20px;">
			{{content}}
		</view>
		当前显示的富文本解析：
		<u-parse :content="content"></u-parse>
		<button @click="changeB">切换为B</button>
		<button @click="changeA">切换为A</button>
	</view>
</template>

<script>
	let a = `<p><span style="color: rgb(0, 255, 52);">hello A！</span></p><span></span>`
	let b = "hello B！"
	export default {
		data() {
			return {
				content: a
			};
		},
		methods: {
			changeB() {
				this.content = b
			},
			changeA() {
				this.content = a
			}
		},
	}
</script>

运行效果

因为我们业务需要显示试题，试题的题干使用 html标签+纯文本+音频链接+视频链接 进行渲染，在切换试题的时候，题干从纯文本到html，结构不一样，就会导致渲染不出试题。

最终解决方案是在切换的时候先不渲染 u-parse 。等 $nextTick 后再重新渲染 u-parse 组件。等后面有时间了再试试转成 nodes 后直接传进去。