###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day9 關於Vue Watch

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

### Watch介紹與使用
* 用來監聽實體內==特定的變數==產生變化時，就會執行某個動作。

甚麼意思咧，簡單來說就是

  <div id="app">
    {{ fullName }}
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
  </div>

var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Niodo',
        lastName: 'shaba',
        fullName: 'Niodo shaba'
    },
    watch: {
        firstName: function (newValue,rawValue) {
            this.fullName = `${newValue} ${this.lastName}`
        },
        lastName: function (newValue) {
            this.fullName = `${this.firstName} ${newValue}`
        },
    },
});

當我輸入了資料，就改變了`firstName`或是`lastName`
當這倆改變了就會觸發function，讓`fullName`跟著改變

:::danger
上面這個例子中，如果要一開始就看得到`fullName`，需要給`fullName`設定初始值，
但是這樣也挺奇怪的哦，還沒編輯哪來的值:confused:
:::

---

### immediate屬性

如果我們的`fullName`不設定初始值，並且希望==一開始就顯示==`fullName`的話該怎麼做？

我們可以在`firstName`裡將`immediate` 設為 `true`，讓監聽值在初始和值被改變時觸發`callback handler`。

var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Niodo',
        lastName: 'shaba',
        // 將初始值拿掉
        fullName: ''
    },
    watch: {
        firstName:{
        immediate: true,
        handler(newVal,oldValue){
            this.fullName=`${newVal} ${this.lastName}`
        },
    },
        lastName: function (newValue) {
            this.fullName = `${this.firstName} ${newValue}`
        },
    },
});

這樣一來，在初始時就會觸發`handler`，讓`fullName`吃到值了

---

### deep屬性
`watch`預設不做深層檢查，若需要監看的資料在不同層的話，該怎麼做呢？

我們多宣告一組 `data` 來存資料，並在之中設置 `deep:true`

    data: {
        user: {
            firstName: 'Niodo',
            lastName: 'shaba',
            fullName: 'Niodo shaba'
        }
    },
	/* 不論哪個改了都跳通知 */
    user: {
        handler: function (val, oldVal) { alert('user內的資料改變了'); },
        deep: true
    }

缺點：只要user中的資料變動，就會進行更動，如此一來==非常耗能==。

:::info
補充：若是只想要`watch`深層的某個欄位，可以用這個方法處理
:::

data: {
    user: {
        firstName: 'Niodo',
        lastName: 'shaba',
        fullName: 'Niodo shaba'
    }
},
watch:{
    'user.firstName':function(value){
        alter('user的姓氏改變了，改成:' + value)
    }
}

---

*參考資料: https://reurl.cc/XLM8d0*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*