在实际使用Vue.js道具之前，我该如何处理它们？

Question

想象一下以下情况：

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

• items
• filterTerm

Menu组件不能只显示项目。它必须首先根据给定的filterTerm进行过滤。

这提出了两个问题：

1. 我不知道在显示items之前要在哪里处理。 我研究了组件文档 ，他们似乎没有提到任何生命周期方法。

2. 是否发生变异所接收到的一个好主意， items支撑？ 除非Vue对每个渲染进行深层克隆（我认为这是不合理的），否则对prop进行突变可能会产生副作用。 因此，我实际上不应该过滤收到的items 。 我应该先克隆它，然后在哪里做呢？ 我可以在data:function() { }做到这一点，但是我的methods在那里不可用:(

那么，在显示items之前过滤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属性更改时都会更新。