Vue筆記三——計算屬性(computed)

阿牛大牛中發表於2021-01-01
Vue筆記

文章目錄

計算屬性

什麼是計算屬性？

  • 我們知道，在模板中可以直接通過插值語法顯示一些data中的資料。
  • 但是在某些情況，我們可能需要對資料進行一些轉化後再顯示，或者需要將多個資料結合起來進行顯示
    • 比如我們又firstName和lastName兩個變數，我們需要顯示完整的名稱。
    • 但是如果多個地方都需要顯示完整的名稱，我們就需要寫多個{{firstName}}{{lastName}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-計算屬性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{getFullName()}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>
  • 我們可以將上面的程式碼換成計算屬性：
    • OK，我們發現計算屬性是寫在例項computed選項中的。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-計算屬性的基本使用</title>
</head>

<body>
    <div id="app">
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed：計算屬性()
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-wclNVCBq-1609508903750)(/Users/mac/Desktop/前端學習筆記/vue/vue筆記三/1.jpg)]

計算屬性的複雜操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-計算屬性的複雜操作</title>
</head>

<body>
    <div id="app">
        <h2>總價格：{{totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                    id: 110,
                    name: '深入理解計算機原理',
                    price: 119
                }, {
                    id: 111,
                    name: '斗羅大陸之絕世唐門',
                    price: 643
                }, {
                    id: 112,
                    name: 'JavaScript從入門到精通',
                    price: 99
                }, {
                    id: 113,
                    name: '高等數學',
                    price: 37
                }]
            },
            computed: {
                totalPrice: function() {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result += this.books[i].price;
                    }
                    return result;
                }
            }
        })
    </script>
</body>

</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-sutX2xSX-1609508903754)(/Users/mac/Desktop/前端學習筆記/vue/vue筆記三/2.jpg)]

計算屬性的setter和getter

  • 我們上面用到的計算屬性看起來像個函式，但實際上應該當成一個屬性。（使用的時候千萬不要加小括號）
computed: {
  fullName: function() {
      return this.firstName + ' ' + this.lastName;
  }
}
  • 實際上，因為計算屬性的set方法一般都不用，只有get所以簡化了：
fullName: {
    // 一般情況set都沒有，只有get
    set: function() {

    },
    get: function() {
        return this.firstName + ' ' + this.lastName;
    }
}

計算屬性的快取

  • 我們可能會考慮這樣一個問題：
    • methods和computed看起來都可以實現我們的功能
    • 那麼為什麼要多一個計算屬性這個東西呢？
    • 原因：計算屬性會進行快取，如果多次使用，計算屬性只會呼叫一次。
  • 我們看下面的程式碼，將methods與computed進行比較。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-計算屬性和methods的對比</title>
</head>

<body>
    <div id="app">
        <!-- 1.直接拼接，過於繁瑣 -->
        <h2>{{firstName}} {{lastName}}</h2>
        <!-- 2.通過定義methods -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!-- 3.通過定義computed -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed：計算屬性()
            computed: {
                fullName: function() {
                    console.log('通過computed');
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
                getFullName() {
                    console.log('通過methods');
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-qinCPM5G-1609508903755)(/Users/mac/Desktop/前端學習筆記/vue/vue筆記三/3.jpg)]

相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式。

我們為什麼需要快取？假設我們有一個效能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於 A。如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用方法來替代。

相關文章