[https://jsrun.pro/7vfKp/edit](https://jsrun.pro/7vfKp/edit) ### 計算屬性 模板中放入太多的邏輯會讓模板過重且難以維護。 ``` <div id="example"> {{ message.split('').reverse().join('') }} </div> ``` 這里要顯示變量message的翻轉字符串。 于是可以使用計算屬性。 #### 實例 ``` var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } } }) ``` reversedMessage 是聲明的計算屬性，vm.reversedMessage相當于getter 函數： ``` console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG' ``` ####　方法 在表達式中調用方法同樣可以達到以上效果 ``` <p>Reversed message: "{{ reversedMessage() }}"</p> // 在組件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } ``` 將統一函數定義成一個計算屬性或是方法,結果是相同的。但不同的是計算屬性是基于它們的響應式依賴進行緩存的。只有響應式依賴發生改變時才會重新求值。多次訪問直接返回不需要計算，效率更高。 * 需要緩存，用屬性； * 不需要緩存，用方法 ### 計算屬性 vs 偵聽屬性 偵聽屬性： 觀察和響應Vue實例上的數據變動。 ``` <div id="demo">{{ fullName }}</div> ``` 偵聽屬性 ``` var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) ``` 計算屬性 ``` var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) ``` #### 計算屬性 的 setter 計算屬性默認只有getter ，不過也可以提供getter方法。 ``` // ... 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] } } } // ... ``` 現在再運行`vm.fullName = 'John Doe'`時，setter 會被調用，`vm.firstName`和`vm.lastName`也會相應地被更新。 ### 偵聽器 watch 當需要在數據變化時執行異步或開銷大的操作時，這個方式時有用的。