文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

新指令 v-memo,提高性能的又一利器

2024-12-01 15:02

关注

在这节课中,我们介绍一下,在 Vue 3.2 中引入新指令 v-memo。引入这个指令的目的是帮助我们提高中型/大型 Vue 应用程序的性能,小项目大家根据需要自行决定。

v-memo 是做什么的?

官网对 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 herep>
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-for 结合使用

使用 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 nodesp>
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 函数的执行。

总结

这个新的指令对于要求性能极高的项目有很在帮助了,一般是在比较大型的项目中使用的,当然小型项目,大家可以根据项目需要进行食用。

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯