Vue — 計算屬性(computed)詳解

萬事順意發表於2024-03-09
Vue

Vue.js 中的計算屬性是基於它的響應式系統來實現的，它可以根據 Vue 例項的資料狀態來動態計算出新的屬性值。在 Vue 元件中，計算屬性常用於對資料進行處理和轉換，以及動態生成一些需要的資料。

一、使用方式

1.定義計算屬性： 在Vue元件中，透過在 computed 物件中定義計算屬性名稱及對應的計算函式來建立計算屬性。計算函式會返回計算屬性的值。

2.在模板中使用計算屬性： 在Vue的模板中，您可以直接像訪問普通屬性一樣使用計算屬性。Vue會自動處理計算屬性的依賴關係，並在相關資料變化時更新計算屬性。

<div id="app">
        <ul>

            <li v-for="(item,index) in list" :key="item.id">
                {{item.name}}有{{item.num}}個
            </li>
        </ul>
        總數 ： {{conputedSum}}個
    </div>
    computed:{
            conputedSum(){
                let sum = this.list.reduce((sum,item)=>{
                    
                   return sum +item.num
                },0)

                return sum
            }
        }

3.計算屬性的特點：

（1）計算屬性是基於它們的依賴進行快取的，只有在依賴發生變化時才會重新求值。

（2）計算屬性的值會根據相關依賴的變化而自動更新，無需手動觸發。

（3）計算屬性的定義類似於普通的屬性，但需要使用函式來返回計算結果。

二、computed與methods的區別

1.計算屬性和方法的呼叫方式不同： 計算屬性是透過對應名稱直接訪問的，而方法需要在模板中使用 v-on 指令或者 @ 符號進行呼叫。

2.計算屬性可以快取結果，而方法不能： 計算屬性的值會被快取起來，只有在它所依賴的響應式資料變化時才會重新計算。而方法每次呼叫都要重新計算，無法被快取。

3.計算屬性應該用於簡單的計算，而方法用於複雜邏輯的處理： 如果需要對資料進行一些簡單的計算或過濾，可以使用計算屬性，因為它們比方法更高效。而如果需要進行一些複雜的邏輯處理，應該使用方法。

三、計算屬性的完整寫法

<div class="div">
            姓：<input type="text" v-model="surName">
                +
            名：<input type="text" v-model="nickName">
            =
            {{fullName}}
            <div>

                <button @click="changeName"> 改名卡</button>
            </div>
        </div>
//預設寫法：只能讀取 不能修改
            // fullName(){
            //         return this.surName+ this.nickName
            // }
            //完整寫法 
            fullName:{
                //獲取資料時，執行get
                get () {
                    return this.surName+ this.nickName
                } ,
                //修改資料時 執行set 修改的值 傳給set的形參
                set(value){
                    console.log(value)
                    this.surName= value.slice(0,1)
                    this.nickName= value.slice(1)

                }
            }

相關文章