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

Question

想象一下下面的情况:

我有一个带有 2 个属性的 Menu 组件:

• 项目
• filterTerm

Menu 组件不能简单地显示项目。它必须先根据给定的 filterTerm 对其进行过滤。

这提出了 2 个问题:

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

2. 改变接收到的 items prop 是个好主意吗？除非 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 属性更改时都会更新。