关于前端:新指令-vmemo提高性能的又一利器

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

Vue3 为咱们提供了几项开箱即用的重大性能改良，但也引入了一些额定的手动性能，能够帮忙进步咱们的利用性能。

在这节课中，咱们介绍一下，在 Vue 3.2 中引入新指令 v-memo。引入这个指令的目标是帮忙咱们进步中型 / 大型 Vue 应用程序的性能，小我的项目大家依据须要自行决定。

官网对 v-memo 定义是这样的：

缓存一个模板的子树。在元素和组件上都能够应用。为了实现缓存，该指令须要传入一个固定长度的依赖值数组进行比拟。如果数组里的每个值都与最初一次的渲染雷同，那么整个子树的更新将被跳过。举例来说：

看起来有点绕，但实际上，很好了解。v-memo 所做的与咱们现有的计算属性一样，只不过 v-memo 的对象是 DOM。

这个新指令将缓存它所管制的 DOM 局部，如果一个特定的值发生变化，只需运行更新并从新渲染。这些值是由咱们本人手动设置。

<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>

对下面解释一下：v-memo 通常是作为组件的一部分来应用的，它只是影响组件 dom 的一个子集。

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

接着，咱们将 v-memo 调配给了一个特定的 DIV 和它的所有子元素。当调用 v-memo 时，须要传递一个值数组，以管制子树的渲染。

数组承受一个或多个值 v-memo="[valueOne, valueTwo]"，也承受像 v-memo="myValue === true" 这样的表白。

另外：用一个空数组调用 v-memo 相当于应用 v-once，只会渲染该局部组件一次。

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

同在看下子树的内容。在咱们的例子中，应用了一个 svg 元素和一个自定义 Vue 组件 vue-custom-element。这样做是为了阐明一件事：v-memo 蕴含任何元素。

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

在下面的例子中，蕴含在 v-memo 中的子树不须要被缓存，因为它是动态的，不会扭转（它不包含任何 Vue 变量）。Vue3 会对动态进行一个晋升，以便进步性能。

在一个动态的 HTML 上增加 v-memo 是没啥作用，不论这个 HTML 有多简单。

在有些状况下，v-memo 不仅能够用来进步性能，还能够通过管制组件的更新周期，理论改善 UX（用户体验）。

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

在下面的例子中，扭转一个独自的字段，例如 field1，并不会导致从新渲染。新的字段将在所有字段都被更新后显示。

最近遇到一个状况，一个子组件会对一个大的 JSON 数据集进行更新和响应。在这种状况下，应用 v-memo 真的很有帮忙，当所有的变动都实现后，就能够触发更新。

应用 v-memo 的一个最常见的用例是在解决应用 v-for 渲染的十分大的列表时。

<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>

如果不在下面的代码中应用 v-memo，selected 变量的每一次扭转都会导致列表的齐全从新渲染。新指令提供的缓存，容许只更新表达式 item.id === selected 发生变化的行，也就是当某个项被选中或者勾销时。

如果咱们思考一个有 1000 条数据的列表。应用上述代码的 v-memo，能够为每一个变动节俭 998 个条从新渲染。

咱们晓得 v-memo 会进行子树渲染更新，但须要留神的是，应用这个指令实际上会进行任何可能被更新触发的代码的执行，如 watch 函数等。

<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();
  }
}

在下面的代码中，如果咱们的 points 值是 1000 以内变动，那么 watch 函数不会被执行，直到 points 的值大于 1000 才会触发 watch 函数的执行。

这个新的指令对于要求性能极高的我的项目有很在帮忙了，个别是在比拟大型的我的项目中应用的，当然小型我的项目，大家能够依据我的项目须要进行食用。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:新指令-vmemo提高性能的又一利器

v-memo 是做什么的？

事例

谬误的应用形式

治理更新

与 v-for 联合应用

无心中进行了子组件触发的更新

总结

交换