Question

考虑您有一个要迭代的对象列表，其中每个对象都包含一个名为f的数组。你还有一个日志函数，它从参数打印一个字符串并返回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个对象，并在该对象中用值4替换第3个数组元素）。

由于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循环，我使用与上面相同的方法来更改base组件数组，但是vue决定这次更新不同。输出是：

subbase
subbase
subbase

我现在无法下定决心。如果我不想在我的子组件中有任何数据（和逻辑）。即使单个对象中只有一个数组发生了变化，我如何阻止vue遍布整个对象呢？

希望你能提供帮助。

Answer 1

问题是，在:key中使用performance-test（自定义组件）时，您尚未声明v-for。尝试：

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

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

Codesandbox working demo here

vuejs v-执行与子组件或不具有子组件的区别

1 个答案: