Vue.js 如何实现局部水化？无 Node.js 服务器场景

核心结论 #

你直接发送仅包含#app和#main的页面结构并挂载Vue的方式不可行，这会丢失原页面的header和footer结构，且易引发Vue水化不匹配问题。正确的局部水化需要保证静态DOM与Vue模板结构一致，或直接将Vue挂载到目标区块（#main）上。

方案一：水化整个#app但仅激活#main的响应式 #

适用于需要保留完整页面静态结构，同时让#main拥有Vue响应式能力的场景：

1. 发送完整静态HTML
   页面需包含完整的#app结构，其中#main预渲染好静态内容：

<div id="app">
    <div id="header"></div>
    <div id="main">
        <p>this is the only content</p>
    </div>
    <div id="footer"></div>
</div>

2. 编写匹配静态结构的Vue代码
   通过CDN引入Vue，创建应用时模板需与静态DOM完全一致，并启用水化模式：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;

createApp({
    data() {
        return {
            message: 'this is the only content'
        }
    },
    // 模板必须与静态DOM结构完全匹配
    template: `
        <div id="header"></div>
        <div id="main">
            <p>{{ message }}</p>
        </div>
        <div id="footer"></div>
    `
}).mount('#app', true); // 第二个参数true开启水化模式
</script>

这种方式下，Vue会识别已有的静态DOM，仅为#main中的插值绑定响应式数据，不会重新渲染整个页面。

方案二：仅局部水化#main区块 #

如果仅需要#main拥有Vue能力，header和footer保持纯静态，可直接将Vue挂载到#main上：

1. 保留完整页面静态结构
   页面依然包含完整的#app、#header、#main、#footer：

<div id="app">
    <div id="header"></div>
    <div id="main">
        <p>this is the only content</p>
    </div>
    <div id="footer"></div>
</div>

2. 挂载Vue到#main并水化

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;

createApp({
    data() {
        return {
            message: 'this is the only content'
        }
    },
    // 模板仅需匹配#main内部的静态结构
    template: `<p>{{ message }}</p>`
}).mount('#main', true);
</script>

这种方式更轻量化，Vue仅接管#main区块，其余部分不受影响。

关键注意点 #

• 结构匹配：水化模式要求Vue模板与预渲染的静态DOM结构完全一致（包括标签层级、属性、文本内容），否则会触发hydration mismatch警告，导致页面渲染异常。
• 无Node后端适配：所有代码通过CDN引入Vue即可实现，无需构建工具或Node服务，直接在静态HTML中编写脚本即可。

内容的提问来源于stack exchange，提问作者Ünsal Korkmaz