我與VueJs第6天_Vue當中的計算屬性跟監聽屬性

 

前面幾個小示範可以漸漸習慣

Vue 起手式都是藉由物件實體化的感覺去對裡面屬性來做設置

和一些客製方法定義

computed屬性

See the Pen vue計算屬性 by Jacob (@dryjoker) on CodePen.

在Vue中若想要藉由雙向綁定獲取來自使用者輸入的值

計算一些數值結果

可以藉由此屬性來設定返回的雙綁值

此外該屬性必須是函數形式來設計

computed屬性的函數能否傳入參數呢?

函數當然也可以定義成有傳餐的形式(在上一個範例是無傳參的形式)

我們可以設計成一個get set的屬性方式

當完全沒有設值時候獲取get回傳

反之我們也能傳入參數

See the Pen vue計算屬性_有傳入參數版 by Jacob (@dryjoker) on CodePen.

在Vue中除了計算屬性之外還有

所謂的監聽屬性.$watch()

See the Pen vue_watch監聽屬性 by Jacob (@dryjoker) on CodePen.

會監聽data跟computed裡面的屬性資料變動

只要裡面有資料更動就會觸發watch屬性中的function

若在computed加上乘2計算也會監聽的到連動

See the Pen vue_watch監聽屬性_2 by Jacob (@dryjoker) on CodePen.

$watch()除了定義為函數

也可以定義成一個物件(必須要有一個handler 和其餘看狀況是否要加的 immediate 跟 deep )

handler屬性 的型參跟上面用函數一樣

immediate屬性 則是指定型態為bool，為真

代表一開始初始化就要進來監聽的handler裡面執行預設為false

deep屬性指定型態為bool，為真代表監聽目標若為物件或陣列時候是否要深入往下每層都監聽

immediate屬性的測試

See the Pen vue_watch監聽屬性_3_immediate by Jacob (@dryjoker) on CodePen.

deep屬性的測試

See the Pen vue_watch監聽屬性_4_deep by Jacob (@dryjoker) on CodePen.

這裡由於監聽的物件本身其實沒有變動

所以oldVal跟Val會一直是一樣的物件參考但變動的是裡面的屬性a