在实际使用 Vue.js props 之前如何处理它们？

Question

想象一下以下情况：

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

• items
• filterTerm

该Menu组件不能只是简单地显示项目。它必须首先根据给定的filterTerm.

这提出了2个问题：

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

2. 改变收到的items道具是个好主意吗？除非 Vue 在每次渲染时执行深度克隆，我认为这是不合理的，否则改变 prop 可能会产生副作用。因此，我实际上不应该过滤收到的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属性更改时都会更新。