V-for循环methods中的方法问题?
发布于 2 个月前 作者 chaoren 286 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
1 回复

整个事情是这样的: 在 Vue 2.x,当有响应式依赖发生变化时,组件的整个 VDOM 树都会被重新渲染。接下来的 diff、patch 等过程会减少最终附加到 DOM 树时的性能损耗,但模板(或者说 render 函数)本身是经过重新计算的。此时,由于 Vue 无法感知 methods 里的依赖,为了保证更新结果的准确,Vue 会再次执行写到模板里的函数调用。这就是你的代码里背景颜色总是在变化的原因(因为你在模板里调用了一个函数)。 计算属性是可以被 Vue 收集依赖的,用计算属性代替函数调用可以避免这个问题。 或者,考虑到你的代码里单元格的背景颜色只需要一次随机生成,把 color() 的逻辑放到模板之外进行就好了。 <tr v-for=“r in rows” :key=“r”> <td v-for=“c in cols” :key=“c” :style="{ backgroundColor: colors[(r - 1) * rows + (c - 1)] }" [@click](/user/click)=“getColor”> {{ random() }}…

回到顶部