时间戳

首页 > 解决方案 > vuejs v-for 有无子组件的执行差异

vue.js - vuejs v-for 有无子组件的执行差异

问题描述

考虑您有一个要迭代的对象列表，其中每个对象都包含一个名为 的数组f。此外，您还有一个 log 函数，它从参数打印字符串并返回 true。在这里您可以看到相应的模板部分：

<template>
    <div>
        <div v-for="o in objArr" v-if="log('base')">
            <div v-for="a in o.f" v-if="log('subbase')">
            </div>
        </div>
    </div>
</template>

以下是使用过的数据示例：

objArr: [
    { a : 1, b : 2, c : 3, d : 4, e : 5, f : [10,9,8]},
    { a : 1, b : 2, c : 3, d : 4, e : 5, f : [10,9,8]},
],

现在我更改其中一个对象中的随机数组元素。我在控制台上执行此操作：（ $vm.objArr[3].f.splice(2,1,4); 这将更改第 4 个对象，并在该对象中将第 3 个数组元素替换为 4）。

由于 vue 的反应能力，它会检测到变化并重新渲染必要的组件。想象一下 objArr 有 2 个元素，而我们正在更改的对象数组有 3 个元素。输出将是：

base
subbase
subbase
subbase

base
subbase
subbase
subbase

现在我想使用组件作为包装器。我将上面更改为：

<div>
    <div >
        <performance-test v-for="o in objArr" v-if="log('base')" :mydata="o">
        </performance-test>
    </div>
</div>

在我们得到的性能测试组件内部：

<div>
    <div v-for="a in mydata.f" v-if="log('basesub')">
    </div>
</div>

我们在 for 循环中仍然有一个 for 循环，我使用与上面相同的方法来更改basecomponents 数组，但是 vue 这次决定更新不同的。输出是：

subbase
subbase
subbase

我现在拿不定主意。如果我不想在我的子组件中有任何数据（和逻辑）。即使单个对象中只有一个数组发生更改，我如何防止 vue 遍及整个对象？

希望你能帮忙。

标签： vue.js

解决方案

似乎问题是您没有在 a:key中使用performance-test（自定义组件）时声明 a v-for。尝试：

<performance-test v-for="o in objArr" v-if="log('base')" :mydata="o" :key="o.a">
</performance-test>

注意：o.a每个 ! 必须是唯一的o！

Codesandbox 工作演示在这里。

推荐阅读