From 7d3c0565cd17430c37c366bc7232bcaad4f4963e Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 12 Aug 2021 18:14:36 +0800 Subject: [PATCH 1/7] docs: update directives.md --- src/api/directives.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/api/directives.md b/src/api/directives.md index 06f9bd23a..41c2789ae 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -476,11 +476,11 @@ ## v-memo -- **Expects:** `Array` +- **预期** `Array` -- **Details:** - - Memoize a sub-tree of the template. Can be used on both elements and components. The directive expects a fixed-length array of dependency values to compare for the memoization. If every value in the array was the same as last render, then updates for the entire sub-tree will be skipped. For example: +- **详细** + + 记住模板的一个子树。在元素和组件上均可以使用。该指令通过一个固定长度的依赖数组来进行记忆比较。如果数组中的每个值跟最后一次渲染时相比都没有发生变化，那么整个子树的更新都将被跳过。举例： ```html
@@ -488,13 +488,13 @@
``` - When the component re-renders, if both `valueA` and `valueB` remain the same, all updates for this `
` and its children will be skipped. In fact, even the Virtual DOM VNode creation will also be skipped since the memoized copy of the sub-tree can be reused. + 当组件重新渲染的时候，如果 `valueA` 与 `valueB` 都维持不变，那么对这个 `
` 以及它的所有子节点的更新都将被跳过。事实上，即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。 - It is important to specify the memoization array correctly, otherwise we may skip updates that should indeed be applied. `v-memo` with an empty dependency array (`v-memo="[]"`) would be functionally equivalent to `v-once`. + 正确地声明记忆数组是很重要的，否则某些事实上需要被应用的更新也可能会被跳过。带有空依赖数组的 `v-memo` (`v-memo="[]"`) 在功能上等效于 `v-once`。 - **Usage with `v-for`** + **结合 `v-for` 使用** - `v-memo` is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. The most common case where this may prove helpful is when rendering large `v-for` lists (where `length > 1000`): + `v-memo` 仅仅是为了在某些性能非常关键的场景下提供一些微观的优化，它应该很少需要被用到。最常见的能够证明其价值的场景是渲染大型的 `v-for` 列表 (比如 `length > 1000`)： ```html
@@ -503,16 +503,17 @@
``` - When the component's `selected` state changes, a large amount of VNodes will be created even though most of the items remained exactly the same. The `v-memo` usage here is essentially saying "only update this item if it went from non-selected to selected, or the other way around". This allows every unaffected item to reuse its previous VNode and skip diffing entirely. Note we don't need to include `item.id` in the memo dependency array here since Vue automatically infers it from the item's `:key`. + 当组件的 `selected` 状态发生变化时，即使绝大多数项目都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在这条项目从未选中到选中时更新它，反之亦然”。这允许每个未受影响的项目重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从项目的 `:key` 中推断出它来。 :::warning - When using `v-memo` with `v-for`, make sure they are used on the same element. **`v-memo` does not work inside `v-for`.** + 在 `v-for` 中使用 `v-memo` 时，确保它们被用在在同一个元素上。 **`v-memo` 在 `v-for` 内部是无效的。** ::: - `v-memo` can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized. But again, it is the developer's responsibility to specify correct dependency arrays to avoid skipping necessary updates. + `v-memo` 也可以用于组件，在子组件的更新检查未进行优化的某些极端场景下，手动防止不必要的更新。但是，重申一遍，开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。 -- **See also:** +- **参考:** - [v-once](#v-once) + ## v-is 已在 3.1.0 中被废弃。请换用[带有 `vue` 前缀的 `is` attribute](/api/special-attributes.html#is)。 From 54cf480d4a9592a8a8ecbf5620ef93afa4210a26 Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 12 Aug 2021 18:15:33 +0800 Subject: [PATCH 2/7] docs: update directives.md --- src/api/directives.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/directives.md b/src/api/directives.md index 41c2789ae..ac8daf759 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -479,7 +479,7 @@ - **预期** `Array` - **详细** - + 记住模板的一个子树。在元素和组件上均可以使用。该指令通过一个固定长度的依赖数组来进行记忆比较。如果数组中的每个值跟最后一次渲染时相比都没有发生变化，那么整个子树的更新都将被跳过。举例： ```html From 1bcd1e08882bff8dbf9ea55674760d81e5964879 Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 12 Aug 2021 18:17:43 +0800 Subject: [PATCH 3/7] docs: update directives.md --- src/api/directives.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/directives.md b/src/api/directives.md index ac8daf759..204ee8e2d 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -503,7 +503,7 @@
``` - 当组件的 `selected` 状态发生变化时，即使绝大多数项目都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在这条项目从未选中到选中时更新它，反之亦然”。这允许每个未受影响的项目重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从项目的 `:key` 中推断出它来。 + 当组件的 `selected` 状态发生变化时，即使绝大多数项目都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在这条项目从未选中变为选中时更新它，反之亦然”。这允许每个未受影响的项目重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从项目的 `:key` 中推断出它来。 :::warning 在 `v-for` 中使用 `v-memo` 时，确保它们被用在在同一个元素上。 **`v-memo` 在 `v-for` 内部是无效的。** From f3ce7dff488a7d0ac6902de4887ccddecb2659ec Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 12 Aug 2021 18:18:49 +0800 Subject: [PATCH 4/7] docs: update directives.md --- src/api/directives.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/directives.md b/src/api/directives.md index 204ee8e2d..fc1ab021e 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -503,10 +503,10 @@
``` - 当组件的 `selected` 状态发生变化时，即使绝大多数项目都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在这条项目从未选中变为选中时更新它，反之亦然”。这允许每个未受影响的项目重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从项目的 `:key` 中推断出它来。 + 当组件的 `selected` 状态发生变化时，即使绝大多数项目都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在这条项目从未选中变为选中时更新它，反之亦然”。这允许每个未受影响的项目重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从项目的 `:key` 中把它推断出来。 :::warning - 在 `v-for` 中使用 `v-memo` 时，确保它们被用在在同一个元素上。 **`v-memo` 在 `v-for` 内部是无效的。** + 在 `v-for` 中使用 `v-memo` 时，确保它们被用在了同一个元素上。 **`v-memo` 在 `v-for` 内部是无效的。** ::: `v-memo` 也可以用于组件，在子组件的更新检查未进行优化的某些极端场景下，手动防止不必要的更新。但是，重申一遍，开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。 From 959493ce0bfd354723d9639358c22d12f5557000 Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 12 Aug 2021 18:43:21 +0800 Subject: [PATCH 5/7] docs: update directives.md --- src/api/directives.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/directives.md b/src/api/directives.md index fc1ab021e..c39a3fb7e 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -516,4 +516,4 @@ ## v-is -已在 3.1.0 中被废弃。请换用[带有 `vue` 前缀的 `is` attribute](/api/special-attributes.html#is)。 +已在 3.1.0 中被废弃。请换用[带有 `vue:` 前缀的 `is` attribute](/api/special-attributes.html#is)。 From 88fc97fc7722e4667b84a3e8ceb5e9eef7a2aa02 Mon Sep 17 00:00:00 2001 From: wxsm Date: Thu, 12 Aug 2021 18:48:14 +0800 Subject: [PATCH 6/7] docs: update directives.md --- src/api/directives.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/api/directives.md b/src/api/directives.md index c39a3fb7e..ca35be10b 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -466,14 +466,12 @@ ``` - - Since 3.2, you can also memoize part of the template with invalidation conditions using [`v-memo`](#v-memo). + 自 3.2 开始，你还可以通过 [`v-memo`](#v-memo) 来记住带有失效条件的部分模板。 - **参考**： - [数据绑定语法- 插值](../guide/template-syntax.html#文本) - [v-memo](#v-memo) - ## v-memo - **预期** `Array` From eebaa9b5937f94f8e0d409573ebd553ac9ddedeb Mon Sep 17 00:00:00 2001 From: wxsm Date: Tue, 17 Aug 2021 09:30:47 +0800 Subject: [PATCH 7/7] Apply suggestions from code review Co-authored-by: Godpu <908662421@qq.com> --- src/api/directives.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/directives.md b/src/api/directives.md index ca35be10b..a5218a11c 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -478,7 +478,7 @@ - **详细** - 记住模板的一个子树。在元素和组件上均可以使用。该指令通过一个固定长度的依赖数组来进行记忆比较。如果数组中的每个值跟最后一次渲染时相比都没有发生变化，那么整个子树的更新都将被跳过。举例： + 对模板的一个子树进行记忆。在元素和组件上均可以使用。该指令通过一个固定长度的依赖数组来进行记忆比较。如果数组中的每个值跟最后一次渲染时相比都没有发生变化，那么整个子树的更新都将被跳过。举例： ```html
@@ -501,7 +501,7 @@
``` - 当组件的 `selected` 状态发生变化时，即使绝大多数项目都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在这条项目从未选中变为选中时更新它，反之亦然”。这允许每个未受影响的项目重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从项目的 `:key` 中把它推断出来。 + 当组件的 `selected` 状态发生变化时，即使绝大多数 item 都没有发生任何变化，大量的 VNode 仍将被创建。此处使用的 `v-memo` 本质上代表着“仅在 item 从未选中变为选中时更新它，反之亦然”。这允许每个未受影响的 item 重用之前的 VNode，并完全跳过差异比较。注意，我们不需要把 `item.id` 包含在记忆依赖数组里面，因为 Vue 可以自动从 item 的 `:key` 中把它推断出来。 :::warning 在 `v-for` 中使用 `v-memo` 时，确保它们被用在了同一个元素上。 **`v-memo` 在 `v-for` 内部是无效的。**