使用 v-html 仅渲染新数据的方法

暴富暴富暴富啦啦啦2026-01-20 9:47

Vue 3 中通过 ref、reactive 声明的变量，Vue 2 中 data 选项中声明的变量，都是响应式数据 。当这些数据对应的 HTML 字符串内容发生变更时，Vue 会检测到数据变化，自动触发 v-html 对应的视图重新渲染，更新渲染后的 HTML 内容。

在页面中渲染HTML时：

若需要字符串更新时触发完整重渲染，请使用响应式存储数据
若只需渲染新增部分而非全部内容，则采用数值存储数据

html 复制代码

<template>
  <div v-for="item in list" :key="item.id">
    <div v-html="item.html" :style="item.style"></div>
  </div>
  <div v-html="result"></div>
</template>

<script setup>
import { ref } from 'vue'
const list = ref([
  {
    id: 1,
    style: 'color: red',
    html: '<div class="mainTitle">本地公共服务与民生满意度调研报告</div>'
  },
  {
    id: 2,
    html: '<h1>一、调研样本基础特征分析</h1>'
  },
  {
    id: 3,
    html: '<h2>（一）样本规模与性别构成</h2>'
  },
  {
    id: 4,
    html: '<div>临时的一段话</div>'
  },
  {
    id: 5,
    isEcharts: true,
    echartsId: 'szz',
    html: '<div id="szz"></div>'
  },
])

let result = ''

// 当有新的值的时候 就直接往数组里面添加数据 这样就只会渲染新的数据
setTimeout(() => {
  list.value.push({
    id: 5,
    html: '666'
  })
}, 2000)
</script>