为什么服务端渲染的内容被vue代替了答案

【问题标题】：Why is the server side rendered content replaced by vue为什么服务端渲染的内容被vue代替了
【发布时间】：2017-03-03 19:10:08
【问题描述】：

我有一个简单的 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 能够“水合”现有的 DOM，但它没有，因为最终结果（在 vue 启动之后）是：

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

我错过了什么？

【问题讨论】：

您能否更清楚地解释您遇到的问题和问题？
您是否尝试过在 Vue 组件中省略数据对象？
我也面临这个问题。我希望客户端机制按原样使用生成的 html，并且仅在进一步的应用程序生命周期中对其进行修改。在下面的 Nuxt.js 演示 (hello-world.nuxtjs.org) 中，行为似乎是正确的。

标签： javascript vue.js vuejs2 server-side-rendering

【解决方案1】：

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

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

【讨论】：

有没有办法告诉vue（客户端）服务器已经用text: 'server'渲染了#server-rendered-test，以避免数据被新数据替换？
您到底想达到什么目的？客户端框架中服务器端渲染支持的重点是在您的 JS 初始化之前获取一些静态 HTML 以显示给用户。为此，您应该在双方使用相同的数据。尝试提供更多关于您的意图的信息，以便我们更好地帮助您。
我想完全按照您的描述进行归档。所以现在我设置了一个全局变量window.initialComponentXState = { text: 'server'} 并将其传递给（客户端）组件的数据属性。谢谢你的回答！这就是我缺少的部分。
是的，就是这样，官方的 Vue 示例使用相同的原理，通过 global variable 传递初始状态。