今天是第二十二天，我想簡單分享一下計算屬性Computed。

在官方文件中，計算屬性Computed是為了避免使用者在模板中放置過多邏輯使得程式碼變得難以維護。像是有變數1、變數2，只要變數1一發生改變，變數2也會隨著改變。所以便有了Computed，讓使用者不用維護兩個變數。

想更深入了解可以參考這兩篇文章:

https://vuejs.org/guide/essentials/computed.html
https://tonyko-tw.medium.com/vue3-%E8%A8%88%E7%AE%97%E5%B1%AC%E6%80%A7-computed-8051d031dfb1

這裡是HTML的部分

<div id="app"  class ="m-3 p-3 border border-success">
    <h3>有幾種水果?</h3>
    <ul>
        <li v-for="fruit in fruits">{{fruit}}</li>
    </ul>
    <hr>
    
    <div class="lead">
        總共有<b class="text-danger">{{fruitCount}}</b>種水果
    </div>
</div>

這裡是JS的部分

<script>
    Vue.createApp({
    data(){
        return{
            fruits:[
                "奇異果",
                "水梨",
                "西瓜",
                "葡萄",
                ]
            }
        },
        computed:{
            fruitCount(){
                return this.fruits.length
            }
        }
    }).mount('#app')
</script>

執行結果

程式碼中沒有"4"這個變量，透過Computed將"4"動態顯示出來。

計算屬性Computed就分享到這邊，我們第二十三天見。