vue 中 watch 的使用

轉載來源 ： https://www.jianshu.com/p/9524eca3cb43

 

在 vue 中，使用 watch 來響應數據的變化。watch 的大致用法有如下幾種。

• 基礎用法：

1. 變量監聽

 <input type="text" v-model="name" />
 {{watchName}}

export default { name: 'HelloWorld', data () { return { name: '', watchName:'' } }, watch: { name (val) { this.watchName = val; } } } 

結果如下：

 

直接監聽變量

直接監聽變量，這種使用方式是 watch 最簡單的最基礎的監聽方式。
當然我們也可以寫一個監聽處理函數，當每次監聽到變量發生變化時執行函數。代碼如下：

watch: { // name (val) { // this.watchName = val; // }, name: 'nameChange' }, methods: { nameChange () { this.watchName = this.name; } } 

結果如下：

 

定義處理函數

2.對象監聽

 

對象的監聽我們可以按照如下方式：

 <input type="text" v-model="formItem.name" />
  {{watchObjName}}

 'formItem.name' (val) { this.watchObjName = val; } 

也可以借助 computed 計算屬性來完成。

  <input type="text" v-model="formItem.name" />
  {{watchObjName}}

  watch: { // name (val) { // this.watchName = val; // }, name: 'nameChange', newName (val) { this.watchObjName = val; } }, computed: { newName () { return this.formItem.name; } }, 

結果如下：

 

對象監聽.png

---

• immediate 和 handler

上面介紹的 watch 的用法有個特點，就是當值第一次綁定的時候，不會執行監聽函數，只有值發生改變才會執行。如果我們需要在最初綁定值得時候也執行函數，就需要用到 immediate 屬性。具體用法請看具體代碼。

 name: { handler (val) { this.watchName = val; }, immediate: true } 

監聽的數據不再像之前一樣寫，而是寫成對象的形式，包含 handler 和 immediate ，之前我們寫的函數其實就是寫在這個 handler 方法；immediate 表示在 watch 中首次綁定數據的時候是否執行 handler ，值為 true 則表示在 watch 聲明的時候就立即執行 handler 方法，值為 false 時，則和一般使用 watch 一樣，在數據發生變化的時候才執行 handler。

---

• deep 深度監聽

當需要監聽復雜的數據類型（對象）的改變時，普通的 watch 方法無法堅挺到對象內部屬性的改變，只有 data 中的數據才能監聽到變化，此時就需要使用 deep 屬性對對象進行深度監聽。

 <input type="text" v-model="person.name" />

  data () { return { person: { id: 1, name: '沐' } } } 

  watch: { person: { handler (val) { console.log('深度監聽：', val); }, deep: true } } 

結果如下：

深度監聽.png

設置了 deep 為 true ，可以監聽到 person.name 的變化，但是這種寫法會給 person 的所有屬性都加上這個監聽器，當對象屬性較多時，每個屬性值得變化都會執行 handler 。如果只需要監聽對象中一個屬性的值，則可以使用字符串的形式監聽對象屬性，也就是上面介紹的對象監聽。

---

至此，watch 的一些用法就介紹完了，最后還需要補充一句，數組（一維、多維）的變化不需要通過深度監聽，對象數據中對象的屬性變化則需要深度監聽。