Vue應用的資料設定選項

• 除了昨天提到的data選項及methods選項以外，還有其他選項，分別是computed選項、props選項以及watch選項。
• computed選項之前有使用過，其用來設定元件的計算屬性，可以在其中實現getter和setter的方法，範例如下：

computed:{
    countString: {
        get(){
            return this.count + "次"
        }
    }
}

• 而props選項用於接收父元件所傳遞的資料，之後會在具體介紹它。
• 最後watch選項之前也有使用過，它可以對元件屬性的變化新增監聽函數，範例如下：

watch:{
    count(value,oldValue){   //參數分別為count變化前和變化後的值
        console.log(value,oldValue)
    }
}

• 注意！！當要監聽的元件屬性發生變化後，監聽函數會將變化後的值與變化前的值作為參數傳遞進來。如果要使用的監聽函數本身定義在元件的methods選項中，也可以直接使用字串的方式來指定要執行的方法，例如：

methods:{
    click() {
        this.count += 1
    },
    countChange(value, oldValue) {
        console.log(value, oldValue)
    }
},
watch:{
    count:"countChange"  //監聽count屬性，發生變化時會呼叫countChange方法
}

• Vue元件還有許多高級功能，像是深度巢狀結構監聽、多重監聽處理等，後續再繼續做介紹！

• 今天就先到這邊囉～