File tree 2 files changed +9
-2
lines changed
2 files changed +9
-2
lines changed Original file line number Diff line number Diff line change 11
11
12
12
## 什么是服务器端渲染(SSR)?
13
13
14
- Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序 。
14
+ Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序 。
15
15
16
16
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在** 服务器** 和** 客户端** 上运行。
17
17
Original file line number Diff line number Diff line change @@ -13,12 +13,19 @@ app.$mount('#app')
13
13
14
14
如果你检查服务器渲染的输出结果,你会注意到应用程序的根元素上添加了一个特殊的属性:
15
15
16
- ``` js
16
+ ``` html
17
17
<div id =" app" data-server-rendered =" true" >
18
18
```
19
19
20
20
` data-server-rendered ` 特殊属性,让客户端 Vue 知道这部分 HTML 是由 Vue 在服务端渲染的,并且应该以激活模式进行挂载。注意,这里并没有添加 ` id="app" ` ,而是添加 ` data-server-rendered ` 属性:你需要自行添加 ID 或其他能够选取到应用程序根元素的选择器,否则应用程序将无法正常激活。
21
21
22
+ 注意,在没有 ` data-server-rendered ` 属性的元素上,还可以向 ` $mount ` 函数的 ` hydrating ` 参数位置传入 ` true ` ,来强制使用激活模式(hydration):
23
+
24
+ ``` js
25
+ // 强制使用应用程序的激活模式
26
+ app .$mount (' #app' , true )
27
+ ```
28
+
22
29
在开发模式下,Vue 将推断客户端生成的虚拟 DOM 树(virtual DOM tree),是否与从服务器渲染的 DOM 结构(DOM structure)匹配。如果无法匹配,它将退出混合模式,丢弃现有的 DOM 并从头开始渲染。** 在生产模式下,此检测会被跳过,以避免性能损耗。**
23
30
24
31
### 一些需要注意的坑
You can’t perform that action at this time.
0 commit comments