Question

想象一下以下情况：

我有一个包含2个道具的Menu组件：

items
filterTerm

Menu组件只是简单地显示项目。它必须先根据给定的filterTerm过滤它。

这提出了两个问题：

在显示之前，我不知道在哪里处理items。我研究了Components documentation，他们似乎没有提及任何生命周期方法。
变异收到的items道具是个好主意吗？除非Vue在每个渲染上执行深度克隆，我认为这是不合理的，变异道具可能会产生副作用。因此，我不应该实际过滤收到的items。我应该首先克隆，但是我会在哪里做呢？我可以在data:function() { }中执行该操作，但我的methods不可用：（

那么，在显示它们之前过滤items的正确方法是什么？

Answer 1

我想说计算属性对此有好处：

让我们想象一下这个数据：

let raw = [
    {
        id: 1,
        link: '/some-link',
        name: 'some-name'
    },
    {
        id: 2,
        link: '/other-link',
        name: 'other-name'
    }
]

在属性中获取此数据的组件：

<template>
    <div>
        <ul>
            <li v-for="item in formated"><a :href="item.href">{{ item.libel }}</a></li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ['raw'],
        computed: {
            formated () {
                let menu = []
                for(let i  0; i < this.raw.length; i++) {
                    menu.push({
                        libel: this.raw[i].name,
                        href: this.raw[i].link
                    })
                }
                return menu
            }
        }
    }
</script>

如您所见，formated方法是一个计算属性，每次raw属性更改时都会更新。

如何在实际使用之前处理Vue.js道具？

1 个答案: