Vue3在一次值更改问题后重新渲染每行

xytpbqjk  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(355)

我遇到了一个问题,在一个大型应用程序中重新呈现一个大表中的值。为了简单起见,我只抽象了Vue playground中的基本元素***(这个简化版本没有多大意义-它纯粹是为了说明目的。
情况是这样的:
我有一个表,其中的行是从一些数据生成的,值由函数返回。当我改变一行中的一个值时,问题就出现了-每行中的每个“等级”值都会被更新。
我知道Vue可能会再次执行v-for循环,然后运行每行的所有内容,包括所有函数。但是,是否有一种方法可以确保只有我修改过的行被重新呈现?类似于:key指令的功能。
正如我所提到的,原始表是一个大型项目中的一个非常大的组件,返回值的函数是必要的。虽然我可能会将数据预编译到某个对象中,但性能问题仍然是一样的-它仍然需要为每个值(可能有数千个)获取正确的数据。

(每次运行get_grade函数都会将“ajaj”打印到控制台)

这是Vue playground中非常简化的表

shyt4zoc

shyt4zoc1#

v-memo指令就是专门为此制定的。传入一个带有表达式的数组,表达式是为组件计算的,值存储在内部。在呈现之前,将再次计算表达式,并且仅当至少有一个值更改时,组件才会更新。
所以在你的例子中,你只需要跟踪当前的成绩:

<tr v-for="pupil of the_class" v-memo="[pupil.grade]">

现在,只有在上次渲染后坡率发生更改时,才会重新渲染该行。
这里是更新的操场

相关问题