iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
2
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 9

Day09 I'm watching you-UnderTaker,認識watch

Watch可以顧名思義的推知,它是關注一個值得變化,當一旦變化,變執行該函數。

watch: {
    data: function(newValue, oldValue) {
        console.log('data changed', newValue, oldValu)
    }
}

如果你不需要任何其他設定,那麼直接在 value 的部分寫入 Function 即可。其中 function 有兩個參數值,分別為改變後的值,及改變前的值。

如果想要額外管理或是複用 function,可以把 function 寫進 methods 管理。

watch: {
    data: "dataHandler"
},
methods: {
    dataHandler (newValue, oldValue) {
        console.log('data changed', newValue, oldValu)
    }
}

上述的 Function,官網文件皆建議不要使用 Arrow function 來撰寫,因為 Arrow function 的 this 是在 function 被呼叫時綁定的,可能不會按照期望的指向 Vue 實例。

再來談到 watch 的設定:

watch: {
    dataObject: {
        handler: function(newValue, oldValue) {
            console.log('data changed', newValue, oldValu)
        },
        deep: true,
        immediate: true
    }
}

1.handler:
放入我們需要處理的程序。
2.deep:
當欲觀察值的特性為 call by reference,例如 Object、 Array 時,需將 deep 值設定為 true,告知 watch 需要深度觀察。否則會因為特性關係,無法觸發監聽器。
3.immediate:
監聽器預設為當值有所變化時才會觸發。如果我們希望在初始化完成後,就先觸發,執行 handler,就可以將 immediate 值設為 true。

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day08 -上我的異步元件走路要扶牆,異步元件
下一篇
Day 10 你改我就變#像極了愛情,認識Computed
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言