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＆＃34; hydrate＆＃34;现有的DOM，但它并不是因为最终结果（在vue开始之后）是：

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

我缺少什么？

Answer 1

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

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

为什么服务器端呈现的内容被vue替换

1 个答案: