Vue设计理念——避免直接操作 HTML 字符串，而是通过 组件化 的方式构建 UI

Vue 官网中有这么一句话

注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。

这两句话强调了 Vue 的设计理念和最佳实践，核心在于 避免直接操作 HTML 字符串，而是通过 组件化 的方式构建 UI。以下是详细解释：

1. “你不能使用 v-html 来拼接组合模板”

含义：

• v-html 是 Vue 的指令，用于将数据作为 HTML 字符串动态渲染到 DOM 中（类似 innerHTML）。
• 问题：如果用 v-html 拼接模板片段（例如通过字符串拼接或动态生成 HTML），会破坏 Vue 的响应式系统和组件化优势。

示例（反模式）：

<template>
  <div v-html="dynamicTemplate"></div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTemplate: '<div>' + someVariable + '</div><button>' + anotherVar + '</button>'
    };
  }
};
</script>

为什么不好？

1. 安全性风险：直接渲染 HTML 字符串可能导致 XSS 攻击（如果字符串来自用户输入且未转义）。
2. 失去响应性：动态 HTML 中的变量不会自动更新，因为 Vue 无法追踪字符串内部的动态绑定。
3. 难以维护：模板逻辑与 JavaScript 代码混杂，违背关注点分离原则。

2. “Vue 不是一个基于字符串的模板引擎”

含义：

• Vue 的模板是 声明式的（基于 DOM 结构或虚拟 DOM），而非通过字符串拼接生成 HTML。
• 对比 jQuery 或旧式框架（如 Backbone），Vue 不鼓励手动操作 DOM 字符串，而是通过数据驱动视图。

正确做法：

使用 Vue 的模板语法（如 {{ }}、v-if、v-for）或 组件 来组合 UI。

示例（正确方式）：

<template>
  <div>
    <div>{{ someVariable }}</div>
    <button>{{ anotherVar }}</button>
  </div>
</template>

或通过组件组合：

<template>
  <CustomComponent :title="someVariable" />
</template>

3. “应当使用组件作为 UI 重用和组合的基本单元”

含义：

• 组件化 是 Vue 的核心思想。将 UI 拆分为独立的、可复用的组件，每个组件封装自己的模板、逻辑和样式。
• 优势：
  • 可复用性：组件可以在不同地方复用。
  • 可维护性：每个组件职责单一，便于调试和扩展。
  • 响应式：数据变化自动更新视图，无需手动操作 DOM。

示例：

<!-- 定义组件 -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'content']
};
</script>

<!-- 复用组件 -->
<template>
  <Card title="Hello" content="This is a reusable component." />
  <Card title="World" content="Another instance." />
</template>

总结

• 避免：用 v-html 拼接模板字符串（如 v-html="'<div>' + data + '</div>'"）。
• 推荐：使用 Vue 的模板语法或组件化开发，让 Vue 管理 DOM 和数据绑定。
• 根本原因：Vue 的核心是 响应式数据绑定 + 虚拟 DOM，而非字符串模板操作。组件化能充分利用这一优势，同时提升代码质量和安全性。

如果需要动态渲染内容，优先使用：

1. 模板语法（如 {{ }}、v-if）。
2. 动态组件（<component :is="...">）。
3. 渲染函数/JSX（高级场景）。