監聽器( watch ) | vue watch deep data
Vue提供了監聽器,當資料變化時叫用函數,函數會有兩個傳入參數:改變前的值、改變後的值,可以使用這個函數做跟此資料變化有關的處理。介紹監聽器在Vue.js中有兩種使用方式:$watch:實體上的函數,使用此函數註冊監聽器。watch:實體上的屬性,此屬性設置的物件在實體建立時會叫用$watch註冊監聽器。$watch是註冊監聽器的函數,而watch是為了開發者方便在實體上設置監聽器而提供的,其實watch本身也是使用$watch註冊監聽器。接下來讓我們來看看如何使用這兩種方式設置監聽器。$watch定義unwatch=vm.$watch(expOrFn,callback,[options])...
Vue 提供了監聽器,當資料變化時叫用函數,函數會有兩個傳入參數: 改變前的值、改變後的值,可以使用這個函數做跟此資料變化有關的處理。
介紹監聽器在 Vue.js 中有兩種使用方式:
$watch : 實體上的函數,使用此函數註冊監聽器。 watch : 實體上的屬性,此屬性設置的物件在實體建立時會叫用 $watch 註冊監聽器。$watch 是註冊監聽器的函數,而 watch 是為了開發者方便在實體上設置監聽器而提供的,其實 watch 本身也是使用 $watch 註冊監聽器。
接下來讓我們來看看如何使用這兩種方式設置監聽器。
$watch 定義unwatch = vm.$watch(expOrFn, callback, [options] )
回傳值$watch 的回傳值是註銷監聽器的函數,執行此函數可使監聽器失效。
參數說明 expOrFn : 設定要監聽的目標,可以使用 JavaScript 表達式或是一個回傳監聽目標值的函數。 callback : 當數值改變時要叫用的函數,此函數會有兩個傳入參數: callback(newVal, oldVal) 。 newVal : 改變後的資料值。 oldVal : 改變前的資料值。 [options] : 非必要參數,監聽器的設定。 deep : 監聽物件時,物件的下層屬性變化也會觸發監聽器。 immediate : 在實體初始化設置監聽器的時候會馬上叫用 callback 函數。expOrFn 參數中使用的 JavaScript 表達式只能是以逗點分隔的物件路徑,像是a.b.c,如果需要監聽更複雜的表達式可以使用函數。
callback 函數中如果要使用 this ,則不能使用 arrow funciton 。
範例 基本按下 + / - 按紐時, $watch 會去更新 newA 及 oldA ,在畫面上會看到 總會跟 a 相同,而 會是 a 改變之前的值。
監聽以 . 分隔的表達式跟前一個例子相同的功能,只是這次監聽的值在物件裡面,使用表達式 b.c.d 就可以監聽 d 屬性。
監聽物件下的各個屬性值假設有個需求是只要物件下的其中...