From ae5c07a6b6eb907ab6eed993009db86912a82661 Mon Sep 17 00:00:00 2001 From: lsbbd <1206261187@qq.com> Date: Tue, 2 Mar 2021 21:06:36 +0800 Subject: [PATCH 1/2] docs: fix bracket typo in Chinese documents (#314) --- docs/zh/guide/data.md | 2 +- docs/zh/guide/streaming.md | 2 +- docs/zh/guide/universal.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/zh/guide/data.md b/docs/zh/guide/data.md index f69f9216..014777f6 100644 --- a/docs/zh/guide/data.md +++ b/docs/zh/guide/data.md @@ -6,7 +6,7 @@ 另一个需要关注的问题是在客户端，在挂载 (mount) 到客户端应用程序之前，需要获取到与服务器端应用程序完全相同的数据 - 否则，客户端应用程序会因为使用与服务器端应用程序不同的状态，然后导致混合失败。 -为了解决这个问题，获取的数据需要位于视图组件之外，即放置在专门的数据预取存储容器(data store)或"状态容器(state container)）"中。首先，在服务器端，我们可以在渲染之前预取数据，并将数据填充到 store 中。此外，我们将在 HTML 中序列化(serialize)和内联预置(inline)状态。这样，在挂载(mount)到客户端应用程序之前，可以直接从 store 获取到内联预置(inline)状态。 +为了解决这个问题，获取的数据需要位于视图组件之外，即放置在专门的数据预取存储容器(data store)或"状态容器(state container)"中。首先，在服务器端，我们可以在渲染之前预取数据，并将数据填充到 store 中。此外，我们将在 HTML 中序列化(serialize)和内联预置(inline)状态。这样，在挂载(mount)到客户端应用程序之前，可以直接从 store 获取到内联预置(inline)状态。 为此，我们将使用官方状态管理库 [Vuex](https://github.com/vuejs/vuex/)。我们先创建一个 `store.js` 文件，里面会模拟一些根据 id 获取 item 的逻辑： diff --git a/docs/zh/guide/streaming.md b/docs/zh/guide/streaming.md index 3994fdf1..917cac1a 100644 --- a/docs/zh/guide/streaming.md +++ b/docs/zh/guide/streaming.md @@ -28,6 +28,6 @@ stream.on('error', err => { 在流式渲染模式下，当 renderer 遍历虚拟 DOM 树 (virtual DOM tree) 时，会尽快发送数据。这意味着我们可以尽快获得"第一个 chunk"，并开始更快地将其发送给客户端。 -然而，当第一个数据 chunk 被发出时，子组件甚至可能不被实例化，它们的生命周期钩子也不会被调用。这意味着，如果子组件需要在其生命周期钩子函数中，将数据附加到渲染上下文 (render context)，当流 (stream) 启动时，这些数据将不可用。这是因为，大量上下文信息 (context information)（如头信息 (head information) 或内联关键 CSS(inline critical CSS)）需要在应用程序标记 (markup) 之前出现，我们基本上必须等待流(stream)完成后，才能开始使用这些上下文数据。 +然而，当第一个数据 chunk 被发出时，子组件甚至可能不被实例化，它们的生命周期钩子也不会被调用。这意味着，如果子组件需要在其生命周期钩子函数中，将数据附加到渲染上下文 (render context)，当流 (stream) 启动时，这些数据将不可用。这是因为，大量上下文信息 (context information)（如头信息 (head information) 或内联关键 CSS(inline critical CSS)需要在应用程序标记 (markup) 之前出现，我们基本上必须等待流(stream)完成后，才能开始使用这些上下文数据。 因此，如果你依赖由组件生命周期钩子函数填充的上下文数据，则**不建议**使用流式传输模式。 diff --git a/docs/zh/guide/universal.md b/docs/zh/guide/universal.md index 1233c485..ecbf3fcf 100644 --- a/docs/zh/guide/universal.md +++ b/docs/zh/guide/universal.md @@ -28,6 +28,6 @@ 大多数自定义指令直接操作 DOM，因此会在服务器端渲染 (SSR) 过程中导致错误。有两种方法可以解决这个问题： -1. 推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」（例如，使用渲染函数(render function)）。 +1. 推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」（例如，使用渲染函数(render function)。 2. 如果你有一个自定义指令，但是不是很容易替换为组件，则可以在创建服务器 renderer 时，使用 [`directives`](../api/#directives) 选项所提供"服务器端版本(server-side version)"。 From b8fd26f2a1cba6ca2b2220a6600c55c0a47d1d6e Mon Sep 17 00:00:00 2001 From: lsbbd <1206261187@qq.com> Date: Wed, 10 Mar 2021 22:26:46 +0800 Subject: [PATCH 2/2] fix: apply suggestions from code review (#314) Co-authored-by: Haoqun Jiang --- docs/zh/guide/streaming.md | 2 +- docs/zh/guide/universal.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/zh/guide/streaming.md b/docs/zh/guide/streaming.md index 917cac1a..3994fdf1 100644 --- a/docs/zh/guide/streaming.md +++ b/docs/zh/guide/streaming.md @@ -28,6 +28,6 @@ stream.on('error', err => { 在流式渲染模式下，当 renderer 遍历虚拟 DOM 树 (virtual DOM tree) 时，会尽快发送数据。这意味着我们可以尽快获得"第一个 chunk"，并开始更快地将其发送给客户端。 -然而，当第一个数据 chunk 被发出时，子组件甚至可能不被实例化，它们的生命周期钩子也不会被调用。这意味着，如果子组件需要在其生命周期钩子函数中，将数据附加到渲染上下文 (render context)，当流 (stream) 启动时，这些数据将不可用。这是因为，大量上下文信息 (context information)（如头信息 (head information) 或内联关键 CSS(inline critical CSS)需要在应用程序标记 (markup) 之前出现，我们基本上必须等待流(stream)完成后，才能开始使用这些上下文数据。 +然而，当第一个数据 chunk 被发出时，子组件甚至可能不被实例化，它们的生命周期钩子也不会被调用。这意味着，如果子组件需要在其生命周期钩子函数中，将数据附加到渲染上下文 (render context)，当流 (stream) 启动时，这些数据将不可用。这是因为，大量上下文信息 (context information)（如头信息 (head information) 或内联关键 CSS(inline critical CSS)）需要在应用程序标记 (markup) 之前出现，我们基本上必须等待流(stream)完成后，才能开始使用这些上下文数据。 因此，如果你依赖由组件生命周期钩子函数填充的上下文数据，则**不建议**使用流式传输模式。 diff --git a/docs/zh/guide/universal.md b/docs/zh/guide/universal.md index ecbf3fcf..1233c485 100644 --- a/docs/zh/guide/universal.md +++ b/docs/zh/guide/universal.md @@ -28,6 +28,6 @@ 大多数自定义指令直接操作 DOM，因此会在服务器端渲染 (SSR) 过程中导致错误。有两种方法可以解决这个问题： -1. 推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」（例如，使用渲染函数(render function)。 +1. 推荐使用组件作为抽象机制，并运行在「虚拟 DOM 层级(Virtual-DOM level)」（例如，使用渲染函数(render function)）。 2. 如果你有一个自定义指令，但是不是很容易替换为组件，则可以在创建服务器 renderer 时，使用 [`directives`](../api/#directives) 选项所提供"服务器端版本(server-side version)"。