如何从localStorage读取Markdown响应式渲染，避免marked抛错？

核心问题修复：避免marked接收空值 #

你出现报错的根本原因是或运算符的兜底逻辑写在了marked执行之后，此时如果localStorage.content为undefined，marked已经执行抛出错误，兜底逻辑根本不会生效。你只需要把兜底逻辑提前到入参阶段即可：

<template>
  <div class="about-info">
    <div class="text-container">
      <div v-html="state.content"></div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import DOMPurify from "dompurify";
import marked from "marked";

const state = reactive({
    // 提前对入参做空值兜底，保证传给marked的永远是字符串类型
    content: DOMPurify(marked(localStorage.content ?? ''))
})
</script>

这里用空值合并运算符??比||更稳妥，只会在值为undefined/null时兜底为空字符串，不会误处理''、0这类合法假值。

模板调用渲染函数源码问题修复 #

你在模板内直接调用DOMPurify和marked出现函数源码的原因是：<script setup>语法糖下，导入的第三方依赖默认不会暴露到模板作用域，模板无法识别这两个变量为可执行函数，就会将其转为字符串输出。
如果想要在模板层处理markdown解析，可以把解析逻辑封装为组件内的公共方法：

<template>
  <div class="about-info">
    <div class="text-container">
      <div v-html="parseMarkdown(localStorage.content)"></div>
    </div>
  </div>
</template>

<script setup>
import DOMPurify from "dompurify";
import marked from "marked";

// 封装为组件内方法，模板可直接调用
const parseMarkdown = (rawMd) => {
  if (!rawMd) return ''
  return DOMPurify(marked(rawMd))
}
</script>

这种写法不需要额外声明响应式状态，原始markdown更新时会自动重新解析渲染。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov