我在一个重要的应用程序中重新呈现大表中的值时遇到了一个问题.为了简单起见,我只抽象了Vueplayground 100中的基本元素

情况是这样的:

我有一个表,其中的行是从一些数据生成的,其中的值由函数返回.当我更改一行中的单个值时,问题就出现了--每行中的每个‘GRADE’值都会更新.

我知道Vue可能会再次执行v-for循环,然后运行每一行上的所有内容,包括所有函数.但是,有什么方法可以确保只重新呈现我修改过的行吗?类似于:key指令所做的事情.

正如我已经提到的,原始表是大型项目中的一个大得多的组件,返回值的函数是必需的.虽然我可能会将数据预编译成某个对象,但性能问题仍然存在-它仍然需要 for each 值(可能以数千计)获取正确的数据.

(every run of function get_grade prints "ajaj" to console)

Here is the very-simplified table in Vue playground

enter image description here

推荐答案

v-memo指令就是专门为此而制定的.传入一个带有表达式的数组,这些表达式将为组件求值,并在内部存储这些值.在呈现之前,将再次计算表达式,并且只有在至少其中一个值发生更改时才会更新组件.

因此,在您的示例中,您只需跟踪当前成绩:

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

现在,只有在上次渲染后坡度发生更改时,才会重新渲染该行.

这是最新的playground

Vue.js相关问答推荐

为什么元素会从Vue 3中的TransitionGroup左上角出现?

如何使用composition api v-model Select 框获取其他JSON 值?

nuxt.js - 预加载 .woff 字体加载为@font-face

带有热重载的 docker 容器上的 Vue.js 应用程序

正确使用 Vue $refs

Vue-router:循环路由以动态创建

Vuetify 在数据表中插入操作按钮并获取行数据

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题?

PhpStorm 中Expected预期表达式

React.js 是否有类似 Vue.js

webpack模块解析失败意外字符'@'

如何在某些路由上隐藏全局组件(例如导航栏)?

Vue.js:从 parent父Vue 获取数据

将 Vuetify 从 1.5 升级到 2 时,Sass-loader 错误 'options has an unknown property 'indentedSyntax''

此 set-cookie 已被阻止,因为它具有 samesite=lax

如何在 Vue 中动态创建组件上获取更新的 $refs?

在手动安装的 vue 组件中使用 vuex

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

Vue如何将动态ID与v-for循环+字符串中的字段连接起来?

beforeCreate 挂钩中的 Vue 2.1 调用方法不起作用