[TOC] # 計算屬性 在模板中，我們可以綁定簡單的屬性鍵值。但實際上，是為兼容平臺差異，uni-app無法支持復雜的 JavaScript 表達式。復雜一點的表達式都需要使用計算屬性來實現，合理的使用計算屬性可以是增加代碼的可讀性。 下面的代碼段定義了屬性name和計算屬性message，這里使用了計算屬性默認的getter ``` export default { data: { name: '' }, computed: { message() { return `Hello, ${this.name}`; } }, } ``` 模板內的表達式非常便利，uni-app不支持復雜的 JavaScript 渲染表達式，目前可以使用的有`+ - * % ?: ! == === > < [] .`。 ``` <!-- 這種就不支持，建議寫 computed --> <view>{{ message.split('').reverse().join('') }}</view> ``` 所以，對于任何復雜邏輯，你都應當使用計算屬性。下面的示例聲明了一個計算屬性 reversedMessage。我們提供的函數將用作屬性 reversedMessage 的 getter 函數。 > 計算屬性有setter和getter，因為setter很少用到，默認是getter。 ``` <template> <view class="content"> <view> <input type="text" v-model="message" placeholder="消息" /> </view> <view> <text class="message">{{ reversedMessage }}</text> </view> </view> </template> <script> export default { data: { message: 'Hello world!', }, computed: { reversedMessage: function() { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } } } </script> <style> .content { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; } input { border-bottom: 1upx solid; } .message { font-size: 60upx; font-weight: bold; } </style> ``` 程序在微信小程序模擬器上運行的效果如圖所示，右側的監視器可以看到變量的值。  # watch、model 雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。 組件的屬性（props）通過偵聽器可以實現雙向綁定的效果，將組件內部的狀態變更通知父組件，但是要實現雙向綁定，一般還需要配合v-model指令。 首先需要定義v-model指令關聯的屬性以及促發模型屬性更新的事件，實現屬性result的雙向綁定功能。 ``` model: { prop: 'result', event: 'toFather' }, ``` 為了實現組件內部狀態的變更能夠實時通知父組件，首先需要創建props屬性result的副本—myResult ``` data() { return { myResult: this.result, } }, ``` 組件內部的data要寫成函數的形式，然后監聽外部對屬性result的變更，并同步到組件內的data屬性myResult中 ``` watch: { result(val) { this.myResult = val } } ``` 最后，組件內對myResult變更后向外部發送事件通知 ``` watch: { myResult (val) { this.$emit('toFather', val) } } ``` 在父組件中通過監聽事件toFather來觀察子組件的狀態變化。 組件定義代碼：components/switch-button.vue ``` <!-- 開關組件代碼 --> <template> <view @click='change' style="padding: 20upx; border: #8F8F94 solid 1px;">{{result?'開':'關'}}</view> </template> <script> export default { model: { prop: 'result', event: 'toFather' }, props: { result: { type: Boolean, default: false }, }, methods: { change() { this.result = !this.result; } }, data() { return { myResult: this.result, } }, watch: { result(val) { console.log("inner result" + val); this.myResult = val }, myResult(val) { //通知父組件，狀態更新了 this.$emit('toFather', val) } } } </script> ``` 調用組件的代碼：pages/lab/gramma/switch-button.vue 外層調用組件方注冊變更方法， ``` <template> <view> <!--開關組件--> <switch-button v-model="status" @toFather="toFather"></switch-button> <!--外部控制--> <input type="button" value="外部變更狀態" @click="change"> <text>{{ status }}</text> </view> </template> <script> import switchButton from 'components/switch-button.vue' export default { data: { status: true //開關狀態數據 }, methods: { change() { this.status = !this.status; }, toFather(status) { console.log(status) } }, components: { switchButton, }, } </script> <style> view { display: block; } </style> ``` ``` <switch-button v-model="status" @toFather="toFather"></switch-button> ``` 將組件內的數據變更，同步到組件外的數據狀態中 ``` methods: { toFather(status) { console.log(status); } }, ```  組件內部和外部變更狀態內外都會同步。