Vue語法統整來到了最後一篇章，今天要來探索更複雜的資料處理是要如何做到？除了介紹到computed計算屬性，也要來了解watch的使用時機！那麼，就讓我們直接看下去吧！

本系列任務：改寫過程回顧常用語法

基本上就是要來驗收前幾天學習的內容，但是旨在整理相關常用指令，看看我們從Vue5%到現在Vue30%寫出來的東西差異大不大！
◎小提示：本系列並不算手把手教學，現有素材請參考：Vue的分組報告—實作To Do List

計算屬性

• computed
  前面兩篇我們透過屬性綁定和js表達式在模板上處理資料，但當判斷邏輯複雜起來不可能都把內容寫在模板中，除了閱讀不易後續的維護性也不好延續，就需要仰賴computed的幫忙！

問題描述： 我們在寫props.todos的時候，運用到了頁籤功能的概念，隨著標籤的切換需要在介面顯示「全部」、「進行中」、「已完成」的代辦事項。因為篩選的條件會異動資料，我們必須保有完整的props.todos，而用filtertodo代理呈現計算結果：

const filtertodo = computed(function () {
    switch (action.value) {
        case "all": {
            return props.todos.filter(todo => true)
        }
        case "now": {
            return props.todos.filter(todo => !todo.status)
        }
        case "pass": {
            return props.todos.filter(todo => todo.status)
        }
        default: {
            return props.todos
        }
    }
})

▲透過action標籤狀態計算處理props.todos並回傳給filtertodo進行呈現
解析： Vue的計算屬性會自動追蹤響應式依賴，偵測到filtertodo依賴於props.todos故當其一異動時，也會跟著更新filtertodo

• getter、setter
  computed預設是readonly的狀態，可讀但不可複寫；需要寫入的時候就要調用getter（讀取）、setter（寫入）：

const newText = ref('')
const keyinText = computed({
    get() {
        return newText.value.split("").reverse().join("")
    },
    set(result) {
        return newText.value = result.split("").reverse().join("")
    }
})

 <p>文字輸入：</p><input type="text" v-model="keyinText"/>
 <p>內容輸出：</p><input type="text" v-model="newText" readonly/>

▲我們創建兩個input，輸入內容的同時另一個input會把整句反轉後顯示

官方聲明： 當我們在使用computed計算屬性時，在該區域中只做「計算的動作」，不應該直接去改變狀態或異動DOM！

計算屬性的 getter 應只做計算而沒有任何其他的副作用，這一點非常重要，請務必牢記。一個計算屬性的聲明中描述的是如何根據其他值派生一個值。因此 getter 的職責應該僅為計算和返回該值！

偵聽器

• watch
  有了前面的前提，watch的出現就是允許在狀態改變下執行「副作用」，更改DOM或是異步操作修改其他元素的狀態：

//要先install mathjs
import * as math from 'mathjs'
const answer=ref("")
const number = ref(Math.round(Math.random() * 100))
const gameRule = ref("請輸入 0-100 的數字")
watch(answer, async (newAnswer, oldAnswer) => {
    if (answer.value > number.value) {
        gameRule.value = `小一點！`
    } else if (answer.value < number.value) {
        gameRule.value = `大一點！`
    } else {
        gameRule.value = `猜中了！`
    }
})

<h2>猜數字遊戲</h2>
<p>{{gameRule}}</p>
<input type="text" v-model.lazy.number="answer" placeholder="請輸入數字" />

範例說明：

1. install並引入mathjs，讓它幫我們設定一個亂數
2. 用watch偵聽玩家給的數字，改變DOM的值做出對應的提示文字

簡易的watch偵聽就完成了，官網還提供了更進階的用法引入多個來源，請參考：Vue-偵聽器

參考資料
Vue 筆記-Computed的get()與set()
基礎 Vue.js(下)
Vue-計算屬性
Vue-偵聽器
vue中使用数学计算