網頁的處理可以分為兩種，一個是資料顯示處理，另一個是操作流程處理。

• 資料顯示處理：像之前會先建立資料模型（Data），再把資料模型裡的資料綁定到HTML樣板裡，並顯示於頁面中。而時常有許多顯示資料需要從原始資料進行額外處理，像是計算並得出結果這類的，Vue就提供了option API-computed以及filter，讓程式更容易閱讀、更乾淨。

• 操作流程處理：
  開發人員可以利用v-on監聽DOM事件並綁定方法進行處理，但有時候也會需要監聽資料的變化，例如：有一個表單想問關於性別的問題，選項功能是選擇性別，使用者選擇完後，需要根據使用者所選的性別來更新對應的問題（不同性別對應不同的題目）。因此，Vue提供option API-watch及$nextTick的全域方法來協助開發人員。

自定義組合變數Option API-computed

Option API-computed可以幫助將資料處理的程式邏輯都放到JavaScript裡，HTML樣板就可以不用那麼多複雜的程式碼，這可以讓開發人員較容易閱讀。
語法：

computed:{
	參數名稱function(){
		return 要回傳的東西/計算式
    }
}

後帶的function稱為computed的handler。
在HTML裡的綁定方式和資料模型屬性一樣使用{{}}綁定。

範例：

<div id="app">
    <p>{{fullName}}擁有{{haveMoney}}元，使用{{used}}元後剩下{{remaining}}元</p>  
</div>

<script>
    var app =Vue.createApp({
        data:function(){
           return{
              firstName:'小華',
              lastName:'王',
              haveMoney:500,
              used:120
           }
        },

        computed:{
           fullName(){
              return this.lastName + this.firstName;
           },
           remaining(){
              return this.haveMoney - this.used;
           }
        }
     });
     app.mount('#app');
</script>

執行結果：

自定義組合變數Option API-computed的更新

除了可以當作資料屬性外，也可以讓自定義組合變數具有雙向綁定的特性。
語法：

computed:{
	參數名稱:{
		get(){},
		set(){}
    }
},

• get()：取得資料並計算。
• set()：反向計算處理，當HTML或程式中指定數值給變數時，會將值帶入set()中進行反向算。

範例：
目標：
給定應考人數及通過人數可以計算出通過率
給定通過率可以反推通過人數

<div id="app">
    <p>通過率：<input v-model="passRate"/></p>
    <p>應考人數：{{examineeNumber}}
       通過人數：{{passNumber}}
       通過率：{{passRate}}%
    </p>
</div>

<script>
    var app =Vue.createApp({
        data:function(){
            return{
               examineeNumber:500,
               passNumber:300,
            }
        },

        computed:{
            passRate:{
               get(){
                  return (this.passNumber / this.examineeNumber)*100;
               },
               set(value){
                  return this.passNumber = (value / 100)*this.examineeNumber; 
               }
            }
        }
     });
     app.mount('#app');
</script>

執行結果：
給定應考人數和通過人數計算出通過率

更動通過率後，計算出通過人數