iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

Vue.js 30天系列 第 9

Vue.js 09 - Watch

雖然前一回Cue到 計算屬性(Computed),照理說該它出場了。
但在這之前,先介紹相對好懂的 Watch。

若寫過 AngularJS,應該覺得非常親切。

Watch 是什麼?

回想一開始寫網頁,當你希望使用者按下按鈕後,送出 ajax request,你會這麼做吧

<body>
<!-- 註冊了一個 click事件,事件處理器為 sendAjaxRequest -->

	<form onsubmit="return false;">
		<!-- 欄位腦補 -->
		<button type="button" onclick="sendAjaxRequest"></button">
	</form>
	
	<scirpt>
		function sendAjaxRequest() {
			/* do something to send */
			alert('request sent.');
		}
	</scirpt>
</body>

當事件觸發時,瀏覽器叫事件處理器起床幹活。

我們希望變數改變時,也有人叫對應的處理器起床做事,這就是 Watch 的用途。

舉例來講,一個人的姓名變了,全名必定改變
寫起來就像這樣

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
  	 /* 名字變了,幫我改全名 */
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
  	 /* 姓氏變了,幫我改全名 */
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    },
    /* 全名變了,幫我昭告天下 */
    fullName: function(val, old) {
      if (val !== old) {
      		alert('命理老師說我命中缺__,幫我改名');
      }
    }
  }
})

Vue Watch預設不做深層檢查,當你需要監看的資料不在同一層時,你可以這麼寫

	data: {
		user: {
			firstName: 'Foo',
			lastName: 'Bar',
			fullName: 'Foo Bar'
		}
	},
	/* 不論姓名全名改變,請通知我 */
	user: {
      handler: function (val, oldVal) { alert('user內的資料改變了'); },
      deep: true
    }

直覺好懂,只是有點囉唆。

得多宣告一組 data 來存資料,資料之間的關聯也散在多個 watcher 內
若是再增加幾個,可能你就不放在眼裡了 ( 因為超過頁面顯示的範圍惹 )

「寶寶覺得眼睛痛,只是寶寶不說」

明天起,計算屬性(Computed) 可以讓寶寶乖乖不哭。


上一篇
Vue.js 08 - 過濾器(Filter)
下一篇
Vue.js 10 - 計算屬性(Computed)
系列文
Vue.js 30天30

1 則留言

0
kkdayy_55330
iT邦新手 5 級 ‧ 2019-01-28 21:29:59

請問這範例當中的val, oldVal是從哪裡來的呢?自定義的嗎?

chunwen iT邦新手 5 級‧ 2019-09-27 22:34:41 檢舉

可以參考官網中有提到 連結
回調函數得到的參數為新值和舊值,這兩個參數都是自訂義的

我要留言

立即登入留言