为什么服务端渲染的内容被vue替换了

Question

我有一个简单的 index.html 文件，其中包含以下 vue 挂载点：

<div id="server-rendered-test" server-rendered="true">server</div>

如您所见，我假装服务器已经渲染了模板。在我的 main.js 中，我有以下代码来挂载 vue：

const serverRenderedTest = new Vue({
  el: '#server-rendered-test',
  data: {
    text: 'client'
  },
  template: '<div id="server-rendered-test">{{ text }}</div>'
});

我希望 vue "hydrate" 现有的 DOM，但事实并非如此，因为最终结果（vue 启动后）是：

<div id="server-rendered-test">client</div>

我错过了什么？

Answer 1

Hydration 意味着 Vue 将尝试使用现有的服务器渲染元素而不是创建新元素（参见解释 here）。因此，在您的情况下，它将找到已经呈现的 div#server-rendered-test 并用新数据替换其中的文本。

您没有遗漏任何东西，这是预期的行为。

为什么服务端渲染的内容被vue替换了

Why is the server side rendered content replaced by vue

javascript

vue.js

server-side-rendering

vuejs2