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

 

前面幾個小示範可以漸漸習慣
Vue 起手式都是藉由物件實體化的感覺去對裡面屬性來做設置
和一些客製方法定義


computed屬性

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

在Vue中若想要藉由雙向綁定獲取來自使用者輸入的值
計算一些數值結果
可以藉由此屬性來設定返回的雙綁值
此外該屬性必須是函數形式來設計


computed屬性的函數能否傳入參數呢?
函數當然也可以定義成有傳餐的形式(在上一個範例是無傳參的形式)




我們可以設計成一個get set的屬性方式
當完全沒有設值時候獲取get回傳
反之我們也能傳入參數


在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屬性的測試






deep屬性的測試

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






這裡由於監聽的物件本身其實沒有變動
所以oldVal跟Val會一直是一樣的物件參考但變動的是裡面的屬性a










留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題