iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

30天手把手的vue.js教學!系列 第 9

2020it邦鐵人賽-30天手把手的Vue.js教學 Day9 - 認識watch屬性

tags: Vue.js ItIron2020

前言

昨天我們簡單介紹了computed屬性並比較了它與methods屬性的主要差別,今天我們則要繼續地看剩下的vue屬性! watch在很多時候都相當實用,使用方法也很簡單! 我們馬上開始今天的進度吧!

什麼是watch

watch就是看,念作襪取。 watch有著監看、觀察的意思,在vue實體中用來檢查某個屬性的值是否有出現任何變動,如果有則針對那些變動做出某些操作,基本寫法也相當的單純。

watch: {
   // 你要監聽的值,可以是data屬性的變數、或是computed計算後的值
   fullName: function(val, oldVal) {
     // 傳入的函數中表示當值變動時,你所要執行的callback,其中第一個參數表示變動後的值
     
   }
}

watch的基礎用法

我們就用接續昨天的範例吧! 一樣麻煩你開啟這隻pen,我們看一下簡單的示範。
在之前的程式瑪中,我們加上watch屬性去觀察firstName的變化,並印出變化後的結果,請你打開console一邊觀看。


<script>
export default {
  data() {
    return {
      firstName: 'Danny',
      lastName: 'Wang'
    };
  },
  methods: {
    getFullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    firstName: function(val) {
      console.log(`the firstName has been change,the new value is ${val}`)
    }
  }
};
</script>

現在請你在輸入框隨便修改firstName,假設今天我改為Danny123
你在console應該會看到以下的訊息!

the firstName has been change,the new value is Danny123

你會發現它順利的印出變動後的值! 不過其實wacth監聽的對象可以傳入第二個參數,第二個參數則是預設為變動前的數值,我們稍微修改一下上方範例。

watch: {
    firstName: function(val, oldVal) {
      console.log(`the firstName has been change,the new value is ${val}`)
      console.log(`the oldVal is ${oldVal}`)
    }
}

一樣的情況下,你會發現輸出結果同樣也印出了舊有的值

the firstName has been change,the new value is Danny123
the oldVal is Danny

watch監聽物件屬性

在某些特別的情況,你想觀察的可能是藏在data某個物件的值、或是某個陣列,比方說今天你在data內是這個樣子

data() {
    return {
      person: {
        name: 'Danny',
        id: 9831032
      }
    };
},

我們都知道你單純監聽person物件是沒有用的XDD,那要如何監聽裡面的值呢? 作法也是相當簡單,只是有些小細節要注意

watch: {
   "person.name" : function(val) {
      
   }
}

我們會是監聽該key值,並以字串的方式傳入,除此之外就沒什麼不同囉!

同樣的方法自然也可以應用在陣列上,畢竟本質是相同的?,假設你今天要觀察某個陣列的長度是否有變化,那你就可以採用這樣的寫法,我有把這個例子寫在demo pen中,想更了解的話可以去玩玩看。

"arr.length" : function(val) {
      console.log(`the new length is ${val}`)
}

watch options

watch屬性中有一些可傳入的選項讓你更精確的控制整個流程,不過為了傳入options,在寫法上會稍微不太一樣,我們就用一開始的firstName做為例子吧! 原先你是這樣寫的

watch: {
    firstName: function(val, oldVal) {
      
    }
}

但如果你想傳入options,上述的寫法就必須改為以下,以物件的方式表示,其中包含

  • handler function
  • options(其中包含immediate & deep,預設為false)
watch: {
    firstName: {
      handler(val, oldVal) {
        
      },
      immediate: true,
      deep: true
    }
}
  • immediate
    若設置為true,handler在初始化的時候就會執行一次,不管監控的值有沒有變化,有關於初始化的概念在之後的文章介紹life cycle時會再提到,這邊先有個印象即可!

  • deep
    若設置為true,則會一同監聽深層的值是否有變化,比方說之前的例子,你便可以直接監聽整個person物件,這樣當person物件中有任何變化時都會觸發handler function。

結語

我們今天介紹了watch屬性,該屬性用途相當廣,常見的使用包括監聽使用者的輸入並給予對應的訊息、監聽傳入的資料並更新畫面等,不過初次接觸時在使用上可能會有些困惑,這些都是很正常的反應! 多學、多用、多錯,漸漸的自然會變成你的東西,不用太緊張?
這幾天的進度比較輕鬆! 希望大家能學得開心~! 我們明天見!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day8 - 認識computed屬性
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day10- 認識Vue Lifecycle
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言