Skip to content

Commit 411089f

Browse files
committed
修正服务器端渲染介绍,更新客户端激活文档
1 parent 93fcb11 commit 411089f

File tree

2 files changed

+9
-2
lines changed

2 files changed

+9
-2
lines changed

docs/zh/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
## 什么是服务器端渲染(SSR)?
1313

14-
Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序
14+
Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序
1515

1616
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在**服务器****客户端**上运行。
1717

docs/zh/guide/hydration.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,19 @@ app.$mount('#app')
1313

1414
如果你检查服务器渲染的输出结果,你会注意到应用程序的根元素上添加了一个特殊的属性:
1515

16-
``` js
16+
``` html
1717
<div id="app" data-server-rendered="true">
1818
```
1919

2020
`data-server-rendered` 特殊属性,让客户端 Vue 知道这部分 HTML 是由 Vue 在服务端渲染的,并且应该以激活模式进行挂载。注意,这里并没有添加 `id="app"`,而是添加 `data-server-rendered` 属性:你需要自行添加 ID 或其他能够选取到应用程序根元素的选择器,否则应用程序将无法正常激活。
2121

22+
注意,在没有 `data-server-rendered` 属性的元素上,还可以向 `$mount` 函数的 `hydrating` 参数位置传入 `true`,来强制使用激活模式(hydration):
23+
24+
``` js
25+
// 强制使用应用程序的激活模式
26+
app.$mount('#app', true)
27+
```
28+
2229
在开发模式下,Vue 将推断客户端生成的虚拟 DOM 树(virtual DOM tree),是否与从服务器渲染的 DOM 结构(DOM structure)匹配。如果无法匹配,它将退出混合模式,丢弃现有的 DOM 并从头开始渲染。**在生产模式下,此检测会被跳过,以避免性能损耗。**
2330

2431
### 一些需要注意的坑

0 commit comments

Comments
 (0)