Question

当用作表达式时，有没有办法告诉Vue只调用一次方法？

这是我的代码：

<div v-for="i in a.b.c.items">
   <div :id="foo(i.value)"></div>
</div>

现在的方式是，foo（）方法将在模型上的任何内容发生更改时执行，而不仅仅是项目。在Vue中有什么东西可以告诉我只评估一次这个吗？像这样：<div :id.only-once="foo(i.value)"

Answer 1

不幸的是，这仅适用于某些事件，例如：在this question here。您可能需要考虑的是computed property，您可以在其中计算所有这些值并返回数组。生成的数组将由Vue缓存，并且在修改items数组之前不会重新评估（并且以Vue将检测到更改的方式进行修改）。

一个例子：

Vue设置

<script>
    new Vue({
        el: '. . .',
        data: {
            a: {b: {c: {items: [. . .]}}}
        },
        methods: {
            foo: function(val) {
                . . .
            }
        },
        computed: {
            itemsAfterFoo: function() {
                var this_vue_instance = this;
                var computed_items = [];
                this_vue_instance.items.forEach(function(item) {
                    computed_items.push(this_vue_instance.foo(item.value));
                });
                return computed_items;
            }
        }
    });
</script>

<强>模板

<div v-for="(i, index) in a.b.c.items">
    <div :id="itemsAfterFoo[index]"></div>
</div>

或者那种效果。

此处有关计算属性的更多信息：https://vuejs.org/v2/guide/computed.html

Vue v-once相当于

1 个答案: