New instruction v-memo, another tool to improve performance

This article was first published on the WeChat public account: Big Move to the World, my WeChat: qq449245884, I will share with you the front-end industry trends, learning methods, etc. as soon as possible.
For more open source works, please see GitHub https://github.com/qq449245884/xiaozhi , including the complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

Vue3 gives us several significant performance improvements out of the box, but also introduces some additional manual features that can help improve our app performance.

In this lesson, we introduce the new directive v-memo introduced in Vue 3.2. The purpose of introducing this directive is to help us improve the performance of medium/large Vue applications, and small projects can be decided by themselves according to their needs.

What does v-memo do?

The official website pair v-memo is defined as follows:

Cache a subtree of templates. Available on both elements and components. To implement caching, this directive needs to pass in a fixed-length array of dependency values for comparison. If every value in the array is the same as the last render, then the entire subtree update will be skipped. for example:

It seems a bit confusing, but in fact, it is very easy to understand. v-memo does the same thing as our existing computed properties, except that the object of v-memo is the DOM.

This new directive will cache the part of the DOM it controls, and if a particular value changes, just run an update and re-render. These values are manually set by ourselves.

case

 <template>
  <div>
    ..the rest of the component
    <div v-memo="[myValue]">
      <svg >
        <title>{{MyValue}}</title>
        ...
      </svg>
      <vue-custom-element :value="myValue"></vue-custom-element>
    </div>
  </div>
</template>

To explain the above: v-memo is usually used as part of a component, it only affects a subset of the component's dom.

 <div v-memo="[myValue]">

Next, we assign v-memo to a specific DIV and all its children. When calling v-memo , you need to pass an array of values to control the rendering of the subtree.

The array accepts one or more values v-memo="[valueOne, valueTwo]" and also accepts expressions like v-memo="myValue === true" .

In addition: calling v-memo with an empty array is equivalent to using v-once , which will only render this part of the component once.

 <svg >
  <title>{{MyValue}}</title>
  ...
</svg>
<vue-custom-element :value="myValue"></vue-custom-element>

Also look at the contents of the subtree. In our case, an svg element and a custom Vue component vue-custom-element . This is done to illustrate one thing: v-memo contains any element.

wrong usage

 <div v-memo="[myValue]">
  <p>Static content, no vue values here</p>
</div>

In the above example, the subtree contained in v-memo does not need to be cached because it is static and does not change (it does not include any Vue variables). Vue3 will add a boost to statics to improve performance.

Adding v-memo to a static HTML does nothing, no matter how complex the HTML is.

Manage updates

In some cases, v-memo can be used to not only improve performance, but actually improve the UX (user experience) by controlling the update cycle of the component.

 <div v-memo="[allFieldChanged]">
  <p>{{ field1 }}</p>
  <p>{{ field2 }}</p>
  <p>{{ field3 }}</p>
  <p>{{ field4 }}</p>
</div>

In the above example, changing a single field, eg field1 , does not cause a re-render. The new fields will be displayed after all fields have been updated.

I recently ran into a situation where a subcomponent would update and respond to a large JSON dataset. In this case, using v-memo really helps to trigger an update when all the changes are done.

Use with v-for

One of the most common use cases for using v-memo v-for is when dealing with very large lists rendered with ---0fa79aa73da575fe9a492c7a320b195a---.

 <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

If you don't use v-memo in the code above, selected every change to the variable will cause a full re-render of the list. The cache provided by the new directive allows updating only the rows where the expression item.id === selected has changed, that is, when an item is selected or canceled.

If we consider a list with 1000 pieces of data. Using v-memo of the above code saves 998 bar re-renders per change.

Inadvertently stopped updates triggered by child components

We know that v-memo will stop the subtree rendering update, but it should be noted that using this instruction will actually stop the execution of any code that may be triggered by the update, such as watch functions, etc.

 <div v-memo="[points > 1000]">
  <myComponent :points="points" />
</div>

//myComponent
<isLevel1 v-if="points <= 1000">....</isLevel1>
<isLevel2 v-if="points > 1000">...</isLevel2>
<script>
...,
watch: {
  points() {
    logPointChange();
  }
}

In the above code, if our points value is changed within 1000, then watch function will not be executed until the value of points is greater than 100 Triggers the execution of the watch function.

Summarize

This new instruction is very helpful for projects that require extremely high performance. It is generally used in relatively large projects. Of course, small projects can be eaten according to the needs of the project.

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.