新的指令v-memo，另一个提升性能的强大工具
时间：2023-03-16 21:34:23
科技观察
Vue3为我们提供了几个开箱即用的主要性能改进，同时还引入了一些额外的手动功能，可以帮助我们提高应用程序的性能。在本课中，我们将介绍Vue3.2中引入的新指令v-memo。引入该指令的目的是为了帮助我们提高中/大型Vue应用程序的性能，小型项目可以根据需要自行决定。v-memo有什么作用？官网对v-memo的定义如下：缓存一个模板的子树。适用于元素和组件。为了实现缓存，这条指令需要传入一个固定长度的依赖值数组来进行比较。如果数组中的每个值都与上次渲染相同，则将跳过整个子树的更新。例如：看起来有点绕口，其实很容易理解。v-memo的作用和我们现有的计算属性是一样的，只是v-memo的对象是DOM。这个新指令将缓存它控制的DOM部分，如果特定值发生变化，只需运行更新并重新渲染。这些值都是我们自己手动设置的。示例
上面解释一下：v-memo通常作为组件的一部分使用，它只影响组件dom的子集。
接下来，我们将v-memo分配给特定的DIV及其所有子元素。调用v-memo时，需要传递一个值数组来控制子树的渲染。数组接受一个或多个值v-memo="[valueOne,valueTwo]"，也接受像v-memo="myValue===true"这样的表达式。另外：用空数组调用v-memo相当于使用v-once，只会渲染一次组件的部分。查看子树的内容.在我们的例子中，使用了一个svg元素和一个自定义Vue组件vue-custom-element。这样做是为了说明一件事：v-memo包含任何元素。的错误使用方式静态内容，此处没有vue值
上面的例子中，v-memo中包含的子树不是需要缓存，因为它是静态的并且不会改变（它不包含任何Vue变量）。Vue3引入了对静态的提升以提高性能。将v-memo添加到静态HTML是没有用的，无论HTML多么复杂。管理更新在某些情况下，v-memo不仅可以用来提高性能，还可以通过控制组件的更新周期来实际改善UX（用户体验）。
{{field1}}
{{field2}}
{{field3}}
{{field4}}
在上面的示例中，更改单个字段（例如field1）不会导致重新渲染。更新所有字段后，将显示新字段。我最近遇到一种情况，子组件会更新并响应大型JSON数据集。在这种情况下，使用v-memo确实有助于在完成所有更改后触发更新。将v-memo与v-for结合使用的最常见用例之一是处理使用v-for呈现的非常大的列表时。
ID:{{item.id}}-选中：{{item.id===selected}}
...morechildnodes
如果上面代码中没有使用v-memo，每次selected变量更改将导致列表的完全重新呈现。新指令提供的缓存允许仅在expressionitem.ID===选定的更改（即选择或取消选择项目时）更新行。如果我们考虑一个包含1000个条目的列表。将v-memo与上述代码一起使用可为每次更改节省998条重新渲染。无意中停止了子组件触发的更新我们知道v-memo会停止子树渲染更新，但需要注意的是，使用这条指令实际上会停止任何可能被更新触发的代码的执行，比如watch功能。