Vue.js使用计算属性缓存结果的方法

<div id="app">
    <p>{{ expensiveOperation }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        numbers: [1, 2, 3, 4, 5]
    },
    computed: {
        expensiveOperation: function() {
            console.log('Expensive operation executed');
            return this.numbers.reduce((sum, number) => sum + number, 0);
        }
    }
});
</script>

<div id="app">
    <input type="text" v-model="searchQuery">
    <ul>
        <li v-for="item in filteredItems">{{ item }}</li>
    </ul>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        searchQuery: '',
        items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
    },
    computed: {
        filteredItems: function() {
            return this.items.filter(item => item.toLowerCase().includes(this.searchQuery.toLowerCase()));
        }
    }
});
</script>

<div id="app">
    <p>{{ fullName }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        firstName: 'Alice',
        lastName: 'Smith'
    },
    computed: {
        fullName: function() {
            return this.firstName + ' ' + this.lastName;
        }
    }
});
</script>