iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

vue.js 30天學習軌跡系列 第 12

Day12 vue.js - watch監聽屬性

官方解释

watch 觀察 Vue 實例變化的一個表達式或計算屬性函數。
回調函數得到的參數為新值和舊值。
表達式只接受監督的鍵路徑。
對於更複雜的表達式,用一個函數取代。


基礎 DMMO

當改變 input 裡面的值之後,watch監聽到值的變化,並計算及輸出於fullName

<div id="app">
  <p>FullName: {{fullName}}</p>
  <p>FirstName: <input type="text" v-model="firstName"></p>
  <p id="info"></p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'Min ',
    lastName: 'Wang ',
    fullName: ''
  },
  watch: {
     firstName(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
    },
  } 
})

handler方法和immediate屬性

還記得上面說watch需要監聽到資料改變的時候才會顯示,
但是如果想要一開始就可以顯示出firstNamelastName的話,whtch提供了一個好的屬性。
watch裡的firstName裡聲明了handler方法會使firstName這個方法先被執行
immediate為true 表示 立即執行 反之 就跟原本一樣不會先被執行

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'Min ',
    lastName: 'Wang ',
    fullName: ''
  },
  watch: {
    firstName: {
      handler(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
      },
      immediate: true
    }
  },
})

deep屬性

watch 裡面還有一個屬性 deep,默認值是 false,代表是否深度監聽,

例如:

<div id="app">
    <p>obj.name: {{obj.name}}</p>
    <p>obj.name: <input type="text" v-model="obj.name"></p>
</div>

當我們在input裡面改動obj.name值的時候,發現是無效的,因為JavaScript已經廢用了Object.observe()這個方法了,這時候就到deep派上用場了,
deep的意思就是深入觀察,監聽器會一層層的往下遍歷,給對象的所有屬性都加上這個監聽器,
但是這樣性能消耗就會非常大了,因為任何修改obj裡面任何一個屬性都會觸發這個監聽器裡的handler。

var vm = new Vue({
  el: '#app',
  data: {
    obj: {
      name: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.name changed');
      },
      immediate: true,
      deep: true
    }
  } 
})

可以去吃烤肉了~/images/emoticon/emoticon02.gif


上一篇
Day11 vue.js - 條件渲染(v-if、v-else、v-else-if、v-show)
下一篇
Day13 vue.js - 生命週期
系列文
vue.js 30天學習軌跡30

尚未有邦友留言

立即登入留言