vue計算屬性和偵聽器

祭出demo

計算屬性

<!--模闆内的表達式非常便利，但是設計它們的初衷是用于簡單運算的。
            在模闆中放入太多的邏輯會讓模闆過重且難以維護。例如：-->

            <div>
                {{ message.split('').reverse().join('') }}
            </div>
            <!--在這個地方，模闆不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，
            這裡是想要顯示變量 message的翻轉字元串。當你想要在模闆中多次引用此
            處的翻轉字元串時，就會更加難以處理。是以，對于任何複雜邏輯，你都應當使用計算屬性。-->
           

• 計算屬性緩存vs方法函數

<!--計算屬性例子： 計算屬性緩存vs方法-->

            <p>原始字元串：{{message}}</p>
            <p>通過計算屬性翻轉後的字元串:{{reversedMessage}}</p>

            <p>通過函數翻轉後的字元串: {{ reversedMessageWithFunction() }}</p>

            <!--我們可以将同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結
            果确實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。
            計算屬性隻有在它的相關依賴發生改變時才會重新求值。這就意味着隻要 message
             還沒有發生改變，多次通路 reversedMessage 計算屬性會立即傳回之前的計算結果，
             而不必再次執行函數。
             我們為什麼需要緩存？假設我們有一個性能開銷比較大的計算屬性 A，它需要周遊一個
             巨大的數組并做大量的計算。然後我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，
             我們将不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。-->
           

• 計算屬性vs偵聽屬性

<!--計算屬性vs偵聽屬性
            Vue 提供了一種更通用的方式來觀察和響應 Vue 執行個體上的資料變動：偵聽屬性。當你
            有一些資料需要随着其它資料變動而變動時，你很容易濫用 watch——特别是如果你之前使用過
             AngularJS。然而，通常更好的做法是使用計算屬性而不是指令式的 watch 回調。細想一下這個例子：-->
            <div>偵聽器：{{fullName}}</div>
            <div>計算屬性{{calcuteFullName}}</div>
            <!--比較而言：計算屬性比偵聽器更簡潔-->
           

• 計算屬性的setter

<!--計算屬性的setter:
            計算屬性預設隻有 getter ，不過在需要時你也可以提供一個 setter ：-->
            <div>計算屬性的getter與setter: {{calcuteStudentName}}</div>
            <!--在console上運作vm.calcuteStudentName="rainbow boy"就可以執行getter and setter-->
           

偵聽器

<!--偵聽器：
            雖然計算屬性在大多數情況下更合适，但有時也需要一個自定義的偵聽器。
            這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應資料的變化。
            當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的。-->
            <p>
                咨詢一個回答是/否的問題:
                <input v-model="question">
            </p>
            <p class="answerStyle">{{ answer }}</p>
           

在這個示例中，使用

watch

選項允許我們執行異步操作 (通路一個 API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設定中間狀态。這些都是計算屬性無法做到的。

除了

watch

選項之外，您還可以使用指令式的 vm.$watch API

執行效果

計算屬性和偵聽器.png

所有運作效果請看demo

祭出demo

參考：

vue.js計算屬性和偵聽器

更新時間: 2018-07-19