Vue v-once 等效

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