使用 v-html 指令可以将一个字符串作为 HTML 动态渲染到 Vue 模板中的某个元素上。虽然 v-html 提供了将动态 HTML 插入到模板的便利性，但过度使用 v-html 可能导致一些问题：
-
安全性问题：使用
v-html可能存在安全风险，特别是当插入的 HTML 内容来自用户输入或未经可靠验证的来源时。恶意用户可能会注入恶意代码或引发跨站脚本攻击（XSS）等攻击，从而危害到用户的浏览器和数据安全。因此，应该避免直接将不受信任的内容通过v-html渲染到模板中。 -
可读性降低：使用
v-html会导致模板的可读性下降，因为模板中的逻辑和结构被部分放在了字符串中，难以直观地理解和维护。特别是当 HTML 内容比较复杂或包含大量动态代码时，代码的可读性将进一步降低。 -
性能问题：由于
v-html会动态生成 HTML 内容，浏览器需要对该内容进行解析和渲染，这可能会导致性能问题。相比于直接使用 Vue 的模板语法和组件来渲染内容，使用v-html可能会引起不必要的重渲染、布局回流等性能损耗。
综上所述，尽管 v-html 提供了方便的功能，但在使用时需要注意安全性和潜在的性能问题。应该尽量减少使用 v-html，并避免将不受信任的内容直接渲染到模板中，以确保代码的安全和可维护性。
可能会导致 xss 攻击
v-html 会替换掉标签内部的子元素
let template = require('vue-template-compiler');
let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`) // with(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})}
console.log(r.render);// _c 定义在core/instance/render.js
// _s 定义在core/instance/render-helpers/index,js
if (key === 'textContent' || key === 'innerHTML') { if (vnode.children) vnode.children.length = 0 if (cur === oldProps[key]) continue // #6601 work around Chrome version <= 55 bug where single textNode // replaced by innerHTML/textContent retains its parentNode property if (elm.childNodes.length === 1) { elm.removeChild(elm.childNodes[0]) }
}
