Vue系列(八)之計算屬性和偵聽器

模板內的表達式非常便利，但不適合複雜的邏輯，所以就有了計算屬性。

計算屬性

計算屬性寫在computed選項中。

舉一個簡單的例子🌰：data中有firstName,lastName，都是響應式的，頁面上顯示全名（firstName + lastName）。

<div id="app">
    <input v-model="firstname">
    <input v-model="lastname">
    <div>{{fullname}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: 'tom',
            lastname: 'smith'
        },
        computed: {
            fullname() {
                return this.firstname + ' ' + this.lastname
            }
        }
    });
</script>

定義了一個計算屬性fullname，計算屬性也是響應式的，它的改變依賴於firstname和lastname的改變。

計算屬性的結果會被緩存，除非依賴的響應式屬性變化纔會重新計算。參考計算屬性和方法的區別

偵聽器

計算屬性能滿足大多數情況，但也有計算屬性無法做到的。比如當需要在數據變化時執行異步或開銷較大的操作時，使用偵聽器是最合適的，偵聽器寫在watch選項中。

watch用來監聽指定數據的改變，指令數據發生了改變，就會觸發watch回調函數。

<div id="app">
    <div>{{name}}</div>
    <button @click="change">change</button>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'ayy'
        },
        watch:{
            name(newVal,oldVal){
                setTimeout(function () {
                    alert('新值：' + newVal + '舊值：' + oldVal);
                },1000);
            }
        },
        methods:{
            change(){
                this.name = '666'
            }
        }
    });
</script>

這裏watch了name的改變，當點擊按鈕name改變後會觸發watch中的name函數，回調函數中能拿到改變前後的兩個值。