vue學習筆記 計算屬性（四）

計算屬性就是vue實例里的computed屬性，對應一個對象，里面可以放各種方法，方法的作用就是可以生成和數據變量對應的計算后的變量，跟數據相關的復雜邏輯變量，都可以使用計算屬性實現，computed里的函數名，對外就是一個變量，默認是getter。

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
            // `this` points to the vm instance
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

 

如果想用setter，也可以手動添加。

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // a computed getter
        reversedMessage: {
            get: function () {
                // `this` points to the vm instance
                return this.message.split('').reverse().join('')
            },
            set: function (newValue) {
                this.message = newValue.split('').reverse().join('')
            }
        }
    }
});

vm.reversedMessage = '12345';

 

Vue實例中還提供了另外一個屬性Watchers，用來觀察變量的變化，如果有變量的值發生了改變，watch里的函數(和變量名一致)會觸發。

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // a computed getter
        reversedMessage: {
            get: function () {
                // `this` points to the vm instance
                console.log('我了');
                return this.message.split('').reverse().join('')
            },
            set: function (newValue) {
                this.message = newValue.split('').reverse().join('')
            }
        }
    },
    watch: {
        message: function (newValue, oldValue) {
            console.log(1);
            console.log(newValue);
            console.log(oldValue);
        },
        reversedMessage: function (newValue, oldValue) {
            console.log(2);
            console.log(newValue);
            console.log(oldValue);
        }
    }
});

vm.reversedMessage = '12345';