watch介紹

watch 監聽器，用以監聽某個變數，並在監聽的變數發生改變時，進行處理。
watch可以得到改變前與改變後的資料，而watch的相依性低，適用於非同步變更資料。

絕對不是你想像的監聽(誤)

下面例子是以監聽<input>輸入值的變化，來驗證帳號格式（條件為只能使用小寫英文、數字、底線）

<template>
	<div>
		<input type="text" v-model="account" />
		<p v-if="!verifiyInputData">輸入正確格式</p>
	</div>
</template>

<script>
export default {
	name: "Test",
	data() {
		return {
			account:"",
			verifiyInputData: true
		}
	},
	watch: {
		account(newValue) {
			this.verifiyInputData = /^[a-z0-9_]$/.test(newValue)
		}
	}
}
</script>

用watch監聽所輸入的帳號，當數值有改變後，就會去驗證帳號格式是否符合規則！

watch attributes (options)

1. deep
2. immediate

這兩個屬性預設都是false

immediate屬性

如果我們需要在最初綁定值的時候也執行watch()，則就需要用到immediate屬性。

當我們輸入firstName後，wacth監聽每次修改變化的新值，然後計算輸出fullName, 而如需在最初綁定的時候執行就要加上handler函式跟immediate屬性

<div id="app">
  <p>FullName: {{fullName}}</p>
  <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    firstName: 'WeiZi',
    lastName: 'Lu',
    fullName: ''
  },
  watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表watch定義firstName()後，就立即去執行handler()
        immediate: true
      }
  }
})

deep屬性

deep是指深層監聽（預設是false），當你想監聽的資料是陣列或物件，而非在同一層，就要加入deep: true，才可監聽到陣列、或物件中的值被改變。

<div id="app">
    姓氏:
    <input type="text" id="first" v-model="name.first">     
	<br/>
    名字:
    <input type="text" id="first" v-model="name.last">
    <br/>
    {{ full }}
</div>

let app = new Vue({
    el: '#app',
    data:{
        name:{
          first: 'Chen',
          last: 'wei'
        },
        full: 'Chen wei'
    },
    methods:{
    },
    watch:{
        name: {
          handler(newVal, oldVal){
            this.full = newVal.first + newVal.last
          },
          immediate: true,
          deep: true
        }
    }
})

watch介紹完，下一篇即將介紹computed，兩者之間的差別究竟是什麼呢？
讓我們看下去

Resource
認識 Vue.js watch 監聽器
vue.js監聽屬性watch