export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark. ;-)'
    }
  },
  watch: {
    // 每當(dāng) question 改變時，這個函數(shù)就會執(zhí)行
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
  methods: {
    async getAnswer() {
      this.answer = 'Thinking...'
      try {
        const res = await fetch('https://yesno.wtf/api')
        this.answer = (await res.json()).answer
      } catch (error) {
        this.answer = 'Error! Could not reach the API. ' + error
      }
    }
  }
}

<p>
  Ask a yes/no question:
  <input v-model="question" />
</p>
<p>{{ answer }}</p>

export default {
  watch: {
    // 注意：只能是簡單的路徑，不支持表達式。
    'some.nested.key'(newValue) {
      // ...
    }
  }
}

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的變更中，
        // 只要沒有替換對象本身，
        // 那么這里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }
}

export default {
  // ...
  watch: {
    question: {
      handler(newQuestion) {
        // 在組件實例創(chuàng)建時會立即調(diào)用
      },
      // 強制立即執(zhí)行回調(diào)
      immediate: true
    }
  }
  // ...
}

export default {
  // ...
  watch: {
    key: {
      handler() {},
      flush: 'post'
    }
  }
}

export default {
  created() {
    this.$watch('question', (newQuestion) => {
      // ...
    })
  }
}

const unwatch = this.$watch('foo', callback)
// ...當(dāng)該偵聽器不再需要時
unwatch()