新指令vmemo，提高性能的又一利器

　　Vue3为我们提供了几项开箱即用的重大性能改进，但也引入了一些额外的手动功能，可以帮助提高我们的应用性能。
　　在这节课中，我们介绍一下，在Vue3。2中引入新指令vmemo。引入这个指令的目的是帮助我们提高中型大型Vue应用程序的性能，小项目大家根据需要自行决定。vmemo是做什么的？
　　官网对vmemo定义是这样的：
　　缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：
　　看起来有点绕，但实际上，很好理解。vmemo所做的与我们现有的计算属性一样，只不过vmemo的对象是DOM。
　　这个新指令将缓存它所控制的DOM部分，如果一个特定的值发生变化，只需运行更新并重新渲染。这些值是由我们自己手动设置。事例template。。therestofthecomponentsvgtitle｛｛MyValue｝｝title。。。svgvuecustomelement：valuemyValuevuecustomelementtemplate
　　对上面解释一下：vmemo通常是作为组件的一部分来使用的，它只是影响组件dom的一个子集。
　　接着，我们将vmemo分配给了一个特定的DIV和它的所有子元素。当调用vmemo时，需要传递一个值数组，以控制子树的渲染。
　　数组接受一个或多个值vmemo〔valueOne，valueTwo〕，也接受像vmemomyValuetrue这样的表达。
　　另外：用一个空数组调用vmemo相当于使用vonce，只会渲染该部分组件一次。svgtitle｛｛MyValue｝｝title。。。svgvuecustomelement：valuemyValuevuecustomelement
　　同在看下子树的内容。在我们的例子中，使用了一个svg元素和一个自定义Vue组件vuecustomelement。这样做是为了说明一件事：vmemo包含任何元素。错误的使用方式pStaticcontent，novuevalueshere
　　在上面的例子中，包含在vmemo中的子树不需要被缓存，因为它是静态的，不会改变（它不包括任何Vue变量）。Vue3会对静态进行一个提升，以便提高性能。
　　在一个静态的HTML上添加vmemo是没啥作用，不管这个HTML有多复杂。管理更新
　　在有些情况下，vmemo不仅可以用来提高性能，还可以通过控制组件的更新周期，实际改善UX（用户体验）。p｛｛field1｝｝p｛｛field2｝｝p｛｛field3｝｝p｛｛field4｝｝
　　在上面的例子中，改变一个单独的字段，例如field1，并不会导致重新渲染。新的字段将在所有字段都被更新后显示。
　　最近遇到一个情况，一个子组件会对一个大的JSON数据集进行更新和响应。在这种情况下，使用vmemo真的很有帮助，当所有的变化都完成后，就可以触发更新。与vfor结合使用
　　使用vmemo的一个最常见的用例是在处理使用vfor渲染的非常大的列表时。pID：｛｛item。id｝｝selected：｛｛item。idselected｝｝p。。。morechildnodes
　　如果不在上面的代码中使用vmemo，selected变量的每一次改变都会导致列表的完全重新渲染。新指令提供的缓存，允许只更新表达式item。idselected发生变化的行，也就是当某个项被选中或者取消时。
　　如果我们考虑一个有1000条数据的列表。使用上述代码的vmemo，可以为每一个变化节省998个条重新渲染。无意中停止了子组件触发的更新
　　我们知道vmemo会停止子树渲染更新，但需要注意的是，使用这个指令实际上会停止任何可能被更新触发的代码的执行，如watch函数等。1000〕myComponent。。。。。。。