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.js觀察者

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

更多vue教程：