Vue.js觀察者

Vue監視程序使您可以偵聽組件數據並在特定屬性發生更改時運行

監視程序是Vue.js的一項特殊功能,它使您可以監視組件狀態的一個屬性,並在該屬性值更改時運行一個函數。

這是一個例子。我們有一個顯示名稱的組件,並允許您通過單擊按鈕進行更改:

<template>
  <p>My name is {{name}}</p>
  <button @click="changeName()">Change my name!</button>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { changeName: function() { this.name = ‘Flavius’ } } } </script>

名稱更改後,我們想做一些事情,例如打印控制台日誌。

我們可以通過添加到watch對像一個名為我們要監視的數據屬性的屬性:

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    changeName: function() {
      this.name = 'Flavius'
    }
  },
  watch: {
    name: function() {
      console.log(this.name)
    }
  }
}
</script>

分配給的功能watch.name可以選擇接受2個參數。首先是新的屬性值。第二個是舊的屬性值:

<script>
export default {
  /* ... */
  watch: {
    name: function(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

無法像使用計算屬性一樣從模板中查找觀察者。

免費下載我的Vue手冊


更多vue教程: