iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 16

Day 16. 計算屬性Computed Properties

前幾天我們介紹了如何將vue 物件中的屬性綁定到模板中,我們講到可以直接在模板中插入JavaScript 表達式來做運算,但實際上Vue不建議我們這麼做,若是簡單的例子還可以,但真正用在開發上會導致內容變複雜,難被閱讀(HTML 內穿插著 JavaScript 的代碼)、難維護(單純用表達式的話,如果有復用的需求會造成在模板上重複寫多次相同的邏輯)。

像這樣:

<div id="app">
    {{ message.split('').reverse().join('') }}
</div>

在這邊,模板內已經不是簡單的聲明式邏輯,我們沒辦法一看就知道這串要拿來顯示變量message的翻轉字串,而如果我們需要在模板中多處使用翻轉字串,整個程式碼就會變得複雜又難閱讀。

這時候我們就需要使用到計算屬性(ノё∀ё)ノ☆゚

Computed Properties 計算屬性

當我們的資料太過複雜、需要一職重複使用的時候,我們可以把它拔出來!
在 vue 物件的 computed 屬性加入自定義的 computed property,並定義其對應的函式。

範例:
這邊我們定義了一個計算屬性的getter:reversedMessagereversedMessage 相依於 message 屬性,所以當 message 改變時,reversedMessage 就會重新計算,跟著改變٩(。・ω・。)و

<div id="app">
        <p>原本的字串: "{{ message }}"</p>
        <p> computed倒轉過後的字串: "{{ reversedMessage }}"</p>
</div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            computed: {
                // 計算屬性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm instance
                    return this.message.split('').reverse().join('')
                }
            }
        });
</script>

https://ithelp.ithome.com.tw/upload/images/20210927/2013140021woKLNrpY.png

當我們打開console打上vm.message=”Goodbye”,將原本的資料從Hello改成Goodbye,透過computed倒轉的字串也會連動一起改變。

https://ithelp.ithome.com.tw/upload/images/20210927/20131400XhxMOD89V5.png

計算屬性的setter

上面的例子我們的computed是一個function,而這個function是這個計算屬性的getter(我們沒寫setter的時候預設都是getter),但如果我們需要setter也有它的設置方式!

getter(讀取)、setter(設值、寫入)

範例:

<div id="app">
    {{ fullName }}
</div>
    
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName: {
                // getter
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        }
    });
</script>

打開Vue Devtools可以看到data裡面有我們設定的firstNamelastName,而computed裡面有組成後的fullName

https://ithelp.ithome.com.tw/upload/images/20210927/20131400tzvn4x386h.png

當我們在 console 中執行 vm.fullName = 'John Doe',可以觀察到不只畫面更新, firstNamelastName被更新了,這時候就是computed中的setterfullName拆開,前者的丟到firstName裡面,後者丟到lastName裡面。

https://ithelp.ithome.com.tw/upload/images/20210927/201314004GTTJYRuXK.png

https://ithelp.ithome.com.tw/upload/images/20210927/20131400RxGn773DRB.png

今天先介紹一下computed的用法跟特點,之後來比較一下它和其他人的差異吧✧*。٩(ˊᗜˋ*)و✧*。
(最近突然好想玩電腦的槍戰遊戲(。ŏ_ŏ))


上一篇
Day 15. 模板語法Template Syntax – 指令
下一篇
Day 17. 計算屬性(Computed) VS 方法(Methods)
系列文
菜鳥學前端,一起vue起來 !30

尚未有邦友留言

立即登入留言