vue計算屬性的使用

我們有時候會在模板中綁定表達式來做簡單的數據處理，但是如果表達式太長，就會變得臃腫難以維護，比如

<div>
    {{text.split(',').reverse().join(',')}}
</div>

表達式里面包含了3個操作，有時候可能會更加復雜，這時我們可以使用計算屬性。如下

<template>
    <div>
        {{reversedText}}
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                text: '123,456'
            }
        },
        computed: {
            reversedText: function () {
                //這里的this指向的是當前的vue實例
                return this.text.split(',').reverse().join(',');  //如果這兩的text是后台接受的數據，最好加個判斷數據為不為空
            }
        }
    }
</script>

在一個計算屬性里可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就可以，計算屬性還可以依賴多個

數據，只要其中任何一個數據變動，計算都會重新執行。例如：

<template>
    <div>
        總價：{{price}}
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                package1: [
                    {
                        name: 'iPhoneX',
                        price: 300,
                        count: 1
                    },
                    {
                        name: 'iPad',
                        price: 100,
                        count: 2
                    }
                ],
                package2: [
                    {
                        name: 'apple',
                        price: 2,
                        count: 5
                    },
                    {
                        name: 'orange',
                        price: 1,
                        count: 10
                    }
                ]
            }
        },
        computed: {
            price: function () {
                var price = 0;
                for(var i = 0; i < this.package1.length; i++){
                    price += this.package1[i].price * this.package1[i].count
                }
                for(var i = 0; i < this.package2.length; i++){
                    price += this.package2[i].price * this.package2[i].count
                }
                return price;
            }
        }
    }

當package1或者package2中price和count有任何變動時，計算屬性都會price都會自動更新，視圖中的總價也會自動變動。

每個計算屬性都包含一個getter和setter，上面的例子都是計算屬性的默認用法，只是利用了getter來讀取。計算屬性提供的setter函數，當你手動修改計算屬性的值時，就可以觸發setter函數，執行一些操作。例如

<template>
    <div>
        姓： {{firstName}}<br>
        名： {{lastName}}<br>
        姓名：{{fullName}}
    </div>
</template>
 
<script>
    export default {
        data(){
            return{
                firstName: 'wang',
                lastName: 'leilei'
            }
        },
        computed: {
            fullName: {
                //getter用於讀取
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                set: function (newValue) {
                    var names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    }
</script>

上面這個例子中，當改變fullName的值改變，this.fullName = "Jon Snow"; firstName和lastName的值也會跟着改變。

就算屬性還有兩個使用小技巧容易被忽略：一個是計算屬性可以依賴其他計算屬性；一個是計算屬性不僅可以依賴當前vue實例，還可以依賴其他實例的數據！