学习Vue 02-24 使用 v-once 和 v-memo 优化渲染

24 使用 v-once 和 v-memo 优化渲染

v-once helps render static content and preserves performance from the rerendering static element. Vue renders elements with this directive presented only once and will not update it regardless of any re-rendering.

v-once 可帮助渲染静态内容，并从重新渲染静态元素中保留性能。Vue 只渲染一次带有此指令的元素，无论是否重新渲染，都不会更新。

To use v-once, place the directive as is on the element tag:

要使用 v-once，请将指令原样放在元素标签上：

<script>
export default {
  data() {
    return {
      name: 'Maya'
    }
  },
  methods: {
  }
}
</script>
<template>
  <div>
    <input v-model="name" placeholder="Enter your name">
  </div>
  <div v-once>{{ name }}</div>
</template>

In the previous example, Vue renders name once for the div tag, and regardless of what value name receives from the user through input field and by v-model, the content of this div won’t be updated .

在上一个示例中，Vue 为 div 标签渲染了一次 name，无论 name 通过输入字段和 v-model 从用户那里接收到什么值，该 div 的内容都不会更新。

While v-once is excellent for defining a block of elements as static content, we use v-memo to memorize a block of parts (or components) within a template conditionally.

v-once 非常适合将元素块定义为静态内容，而我们则使用 v-memo 来有条件地记忆模板中的部件（或组件）块。

v-memo accepts an array of JavaScript expressions as its value. We place it on the top element where we want to control its and its children’s erendering.

v-memo 接受 JavaScript 表达式数组作为其值。我们将其放置在顶部元素上，以便控制该元素及其子元素的渲染。

Vue then validates these JavaScript conditional expressions and only triggers the re-rendering on the target block of elements when fulfilling those condition(s).

然后，Vue 会验证这些 JavaScript 条件表达式，只有在满足这些条件时才会触发对目标元素块的重新渲染。

Take rendering a gallery of image cards, for instance. Assume we have an array of images. Each image is an object with a title, url, and id. Users can select an image card by clicking on the card, and the selected card will have a blue border.

以渲染图像卡画廊为例。假设我们有一个图片数组。每张图片都是一个包含标题、url 和 id 的对象。用户可以通过点击图片卡来选择图片卡，被选中的图片卡将带有蓝色边框。

First, let’s define the images data array and selected image card id in the component data object:

首先，让我们在组件数据对象中定义图像数据数组和选定的图像卡 ID：

<script>
export default {
  data() {
    return {
      selected: null,
      images: [{
        id: 1,
        title: 'Cute cat',
        url: 'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/TheCute%20Cat',
      }, {
        id: 2,
        title: 'Cute cat no 2',
        url:
          'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/cute_cat',
      }, {
        id: 3,
        title: 'Cute cat no 3',
        url:
          'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/cat_me',
      }, {
        id: 4,
        title: 'Just a cat',
        url:
          'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/cat_1'
        ,
      }]
    }
  }
}
</script>

Then we define the layout for the list rendering to the template, adding a conditional memorization v-memo for the list item to re-render only if the image item is no longer selected, or vice versa:

然后，我们在模板中定义列表渲染的布局，为列表项添加条件记忆 v-memo，只有当图像项不再被选中时才重新渲染，反之亦然：

<template>
  <ul>
    <li v-for="image in images" :key="image.id" :style="selected === image.id ? { border: '1px solid blue' } : {}"
      @click="selected = image.id" v-memo="[selected === image.id]">
      <img :src="image.url">
      <h2>{{ image.title }}</h2>
    </li>
  </ul>
</template>

We set the re-rendering to only if the condition check selected === image.id results differently from the previous check.

我们将重新渲染设置为仅当条件检查 selected === image.id 的结果与之前的检查结果不同时。

Every time you select an image by clicking on the image card, Vue will only re-render two items: the previously selected item and the currently selected one. For optimizing large list rendering, this directive can be very powerful.

每次点击图片卡选择图片时，Vue 只会重新渲染两个项目：之前选择的项目和当前选择的项目。对于优化大型列表的呈现，该指令非常强大。

v-memo is available only in Vue 3.2 and above.

v-memo 仅适用于 Vue 3.2 及以上版本。

We have learned how to write a component using the template syntax and some common Vue directives, except v-slot. We will resume discussing the power of v-slot in Chapter 3.

我们已经学会了如何使用模板语法和一些常用的 Vue 指令（v-slot 除外）编写组件。我们将在第三章继续讨论 v-slot 的强大功能。

Next, we will learn how to register a component globally, making it available for use in other components of the same application without explicitly importing them.

接下来，我们将学习如何全局注册一个组件，使其可以在同一应用程序的其他组件中使用，而无需显式导入。