我與VueJs第6天_Vue當中的計算屬性跟監聽屬性
前面幾個小示範可以漸漸習慣
Vue 起手式都是藉由物件實體化的感覺去對裡面屬性來做設置
和一些客製方法定義
computed屬性
在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
留言
張貼留言